怎么将初始状态设定为隐藏状态

如何将初始状态设定为隐藏状态?以下的代码显示一个日历和一个按钮,我希望此日历在刚打开页面的时候处于隐

如何将初始状态设定为隐藏状态?
以下的代码显示一个日历和一个按钮,我希望此日历在刚打开页面的时候处于隐藏状态,(此后按下按钮后再显示,或者隐藏)
请问该如何修改?

<!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>&nbsp;</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>&nbsp;</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> &nbsp; </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> &nbsp; </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> &nbsp; </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> &nbsp; </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; }