如何将初始状态设定为隐藏状态?
以下的代码显示一个日历和一个按钮,我希望此日历在刚打开页面的时候处于隐藏状态,(此后按下按钮后再显示,或者隐藏)
请问该如何修改?
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Customizable Calendar Script</title>
</head>
<body>
<script>
year= 2008;
month= 2;
day= 25;
document.write('<tr>');
document.write('<td class="TestContainer">');
id = Calendar(year, month, day, null, 'CalendarStyle' );
document.write('<input type="button" onclick="ShowHide(this,\''+id+'\');" value="Hide"></td>');
document.write("</tr>");
function ShowHide(btn, id)
{
StyleObj = document.getElementById(id).style;
alert( StyleObj.display );
if (StyleObj.display != 'none')
{
StyleObj.display = 'none';
btn.value = 'Show';
}
else
{
StyleObj.display = 'block';
btn.value = 'Hide';
}
}
function Calendar(Year, Month, Day, ContainerId, ClassName)
{
Calendar.MonthNames = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
//If no parameter is passed use the current date.
this.oDate= new Date();
this.Year= (Year == null) ? this.oDate.getFullYear() : Year;
this.Month= (Month == null) ? this.oDate.getMonth() : Month - 1;
this.Day= (Day == null) ? 0 : Day;
this.oDate= new Date(this.Year, this.Month, 1);
this.NextMonth= new Date(this.Year, this.Month + 1, 1);
this.WeekStart= this.oDate.getDay();
// Get the number of months in current month
this.MonthDays= Math.round((this.NextMonth.getTime() - this.oDate.getTime()) / 86400000) + 1;
this.HTML = '<table class="' + ((ClassName == null) ? 'tblCalendar' : ClassName) + '" cellspacing="0">';
// Title bar
this.HTML += '<tr><td colspan="7" class="Title">' + Calendar.MonthNames[this.Month] + ' ' + this.Year + '</td></tr>';
alert( HTML );
// Week Names
this.HTML += '<tr class="WeekName"><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>';
this.HTML += '<tr>';
// Fill the previous month days with space
for(DayCounter = 0; DayCounter < this.WeekStart; DayCounter++)
{
this.HTML += '<td> </td>';
}
// Populate current month
for(DayCounter = 1; DayCounter < this.MonthDays; DayCounter++)
{
if((DayCounter + this.WeekStart) % 7 == 1) this.HTML += '<tr>';
if(DayCounter == this.Day)
this.HTML += '<td class="SelectedDay">' + DayCounter + '</td>';
else this.HTML += '<td>' + DayCounter + '</td>';
if((DayCounter + this.WeekStart) % 7 == 0) this.HTML += '</tr>';
}
// Fill the next month days with space
for(j = (42 - (this.MonthDays + this.WeekStart)), DayCounter = 0; DayCounter <= j; DayCounter++)
{
this.HTML += '<td> </td>';
if((j - DayCounter) % 7 == 0) this.HTML += '</tr>';
}
this.HTML += '</table>';
// Check whether the Container Id is null
if(ContainerId != null)
{
this.Container = document.getElementById(ContainerId);
if(this.Container)// If an object exists with the given ContainerId insert the Calendar into the object
document.getElementById(ContainerId).innerHTML = this.HTML;
else// Else create an element with the given id and insert the calendar
document.write('<div id="' + ContainerId + '">' + this.HTML + '</div>');
}
else
{
// Loop until a unique id is obtained for the container
do
{
ContainerId = 'tblCalendar' + Math.round(Math.random() * 1000);
}
while(document.getElementById(ContainerId));
// create an element with the new id and insert the calendar
document.write('<div id="' + ContainerId + '">' + this.HTML + '</div>');
}
// Returns Id of the element containing the calendar
return ContainerId;
}
</script>
</body>
</html>
[解决办法]
<head runat="server">
<title> Customizable Calendar Script </title>
</head>
<script>
year = 2008;
month = 2;
day = 25;
//document.write(' <tr> ');
//document.write(' <td class="TestContainer" > ');
// id = Calendar(year, month, day, null, 'CalendarStyle' );
//document.write(' <input type="button" onclick="ShowHide(this,\''+Calendar(year, month, day, null, 'CalendarStyle' )+'\');" value="Hide"> </td> ');
//document.write(" </tr> ");
function ShowHide(btn, id)
{
StyleObj = document.getElementById(id).style;
alert( StyleObj.display );
if (StyleObj.display != 'none')
{
StyleObj.display = 'none';
btn.value = 'Show';
}
else
{
StyleObj.display = 'block';
btn.value = 'Hide';
}
}
function Calendar(Year, Month, Day, ContainerId, ClassName)
{
Calendar.MonthNames = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
//If no parameter is passed use the current date.
this.oDate = new Date();
this.Year = (Year == null) ? this.oDate.getFullYear() : Year;
this.Month = (Month == null) ? this.oDate.getMonth() : Month - 1;
this.Day = (Day == null) ? 0 : Day;
this.oDate = new Date(this.Year, this.Month, 1);
this.NextMonth = new Date(this.Year, this.Month + 1, 1);
this.WeekStart = this.oDate.getDay();
// Get the number of months in current month
this.MonthDays = Math.round((this.NextMonth.getTime() - this.oDate.getTime()) / 86400000) + 1;
this.HTML = ' <table class="' + ((ClassName == null) ? 'tblCalendar' : ClassName) + '" cellspacing="0"> ';
// Title bar
this.HTML += ' <tr> <td colspan="7" class="Title"> ' + Calendar.MonthNames[this.Month] + ' ' + this.Year + ' </td> </tr> ';
alert( HTML );
// Week Names
this.HTML += ' <tr class="WeekName"> <td> S </td> <td> M </td> <td> T </td> <td> W </td> <td> T </td> <td> F </td> <td> S </td> </tr> ';
this.HTML += ' <tr> ';
// Fill the previous month days with space
for(DayCounter = 0; DayCounter < this.WeekStart; DayCounter++)
{
this.HTML += ' <td> </td> ';
}
// Populate current month
for(DayCounter = 1; DayCounter < this.MonthDays; DayCounter++)
{
if((DayCounter + this.WeekStart) % 7 == 1) this.HTML += ' <tr> ';
if(DayCounter == this.Day)
this.HTML += ' <td class="SelectedDay"> ' + DayCounter + ' </td> ';
else this.HTML += ' <td> ' + DayCounter + ' </td> ';
if((DayCounter + this.WeekStart) % 7 == 0) this.HTML += ' </tr> ';
}
// Fill the next month days with space
for(j = (42 - (this.MonthDays + this.WeekStart)), DayCounter = 0; DayCounter <= j; DayCounter++)
{
this.HTML += ' <td> </td> ';
if((j - DayCounter) % 7 == 0) this.HTML += ' </tr> ';
}
this.HTML += ' </table> ';
// Check whether the Container Id is null
if(ContainerId != null)
{
this.Container = document.getElementById(ContainerId);
if(this.Container) // If an object exists with the given ContainerId insert the Calendar into the object
document.getElementById(ContainerId).innerHTML = this.HTML;
else // Else create an element with the given id and insert the calendar
document.write(' <div id="' + ContainerId + '"> ' + this.HTML + ' </div> ');
}
else
{
// Loop until a unique id is obtained for the container
do
{
ContainerId = 'tblCalendar' + Math.round(Math.random() * 1000);
}
while(document.getElementById(ContainerId));
// create an element with the new id and insert the calendar
document.write(' <div id="' + ContainerId + '"> ' + this.HTML + ' </div> ');
}
// Returns Id of the element containing the calendar
return ContainerId;
}
</script>
<body><form id =form1 runat =server ><table >
<tr> <td class="TestContainer" ><input type="button" onclick="ShowHide(this,\''+Calendar(year, month, day, null, 'CalendarStyle' )+'\');" value="Hide"> </td> </tr></table>
</form></body>
</html>
[解决办法]
给分吧
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> Customizable Calendar Script </title>
</head>
<body>
<script>
year = 2008;
month = 2;
day = 25;
document.write(' <tr> ');
document.write(' <td class="TestContainer"> ');
id = Calendar(year, month, day, null, 'CalendarStyle' );
document.write(' <input type="button" onclick="ShowHide(this,\''+id+'\');" value="Show"> </td> ');
document.write(" </tr> ");
function ShowHide(btn, id)
{
StyleObj = document.getElementById(id).style;
alert( StyleObj.display );
if (StyleObj.display != 'none')
{
StyleObj.display = 'none';
btn.value = 'Show';
}
else
{
StyleObj.display = 'block';
btn.value = 'Hide';
}
}
function Calendar(Year, Month, Day, ContainerId, ClassName)
{
Calendar.MonthNames = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
//If no parameter is passed use the current date.
this.oDate = new Date();
this.Year = (Year == null) ? this.oDate.getFullYear() : Year;
this.Month = (Month == null) ? this.oDate.getMonth() : Month - 1;
this.Day = (Day == null) ? 0 : Day;
this.oDate = new Date(this.Year, this.Month, 1);
this.NextMonth = new Date(this.Year, this.Month + 1, 1);
this.WeekStart = this.oDate.getDay();
// Get the number of months in current month
this.MonthDays = Math.round((this.NextMonth.getTime() - this.oDate.getTime()) / 86400000) + 1;
this.HTML = ' <table class="' + ((ClassName == null) ? 'tblCalendar' : ClassName) + '" cellspacing="0"> ';
// Title bar
this.HTML += ' <tr> <td colspan="7" class="Title"> ' + Calendar.MonthNames[this.Month] + ' ' + this.Year + ' </td> </tr> ';
alert( HTML );
// Week Names
this.HTML += ' <tr class="WeekName"> <td> S </td> <td> M </td> <td> T </td> <td> W </td> <td> T </td> <td> F </td> <td> S </td> </tr> ';
this.HTML += ' <tr> ';
// Fill the previous month days with space
for(DayCounter = 0; DayCounter < this.WeekStart; DayCounter++)
{
this.HTML += ' <td> </td> ';
}
// Populate current month
for(DayCounter = 1; DayCounter < this.MonthDays; DayCounter++)
{
if((DayCounter + this.WeekStart) % 7 == 1) this.HTML += ' <tr> ';
if(DayCounter == this.Day)
this.HTML += ' <td class="SelectedDay"> ' + DayCounter + ' </td> ';
else this.HTML += ' <td> ' + DayCounter + ' </td> ';
if((DayCounter + this.WeekStart) % 7 == 0) this.HTML += ' </tr> ';
}
// Fill the next month days with space
for(j = (42 - (this.MonthDays + this.WeekStart)), DayCounter = 0; DayCounter <= j; DayCounter++)
{
this.HTML += ' <td> </td> ';
if((j - DayCounter) % 7 == 0) this.HTML += ' </tr> ';
}
this.HTML += ' </table> ';
// Check whether the Container Id is null
if(ContainerId != null)
{
this.Container = document.getElementById(ContainerId);
if(this.Container) // If an object exists with the given ContainerId insert the Calendar into the object
document.getElementById(ContainerId).innerHTML = this.HTML;
else // Else create an element with the given id and insert the calendar
document.write(' <div id="' + ContainerId + '" style="display:none"> ' + this.HTML + ' </div> ');
}
else
{
// Loop until a unique id is obtained for the container
do
{
ContainerId = 'tblCalendar' + Math.round(Math.random() * 1000);
}
while(document.getElementById(ContainerId));
// create an element with the new id and insert the calendar
document.write(' <div id="' + ContainerId + '" style="display:none"> ' + this.HTML + ' </div> ');
}
// Returns Id of the element containing the calendar
return ContainerId;
}
</script>
</body>
</html>
[解决办法]
改Calendar函数最后倒数第2句div的样式
- JScript code
// create an element with the new id and insert the calendar //==============这里把div默认隐藏================document.write(' <div id="' + ContainerId + '" style="display:none"> ' + this.HTML + ' </div> '); } // Returns Id of the element containing the calendar return ContainerId; } 