Page calendar implemented by Javascript

:

CSS code:

Copy codeThe Code is as follows: <style type = "text/css">
*{
Margin: 0;
Padding: 0;
Font: 10px tahoma;
}
# Calender {
Text-align: center;
Width: 147px;
Font-size: 10px;
/* Color: #27B0C1 ;*/
Margin: 12px 0 12px 6px;
Border-top: 1px solid # EEEEEE;
Border-left: 1px solid # EEEEEE;
}
# Calender. arrow_over {
Color: # FF1493;
}
# Calender. arrow_out {
Color: # FF8C00;
}
# Calender td {
Border-bottom: 1px solid # EEEEEE;
Border-right: 1px solid # EEEEEE;
Width: 21px;
Height: 20px;
Line-height: 16px;
Color: #666666;
}
# Calender # cal_title {
Width: 147px; background: # EFEFEF;
}
# Calender # week td {
Background: # F8F8F8;
}
# Calender. current {
Background: # AAE7E8;
Display: block;
Margin: 2px;
}
# Calender. notcurrent {
Display: block;
Margin: 2px;
Background: # EDEDED;
}
</Style>

Script code:Copy codeThe Code is as follows: <script type = "text/javascript">
<! --
Document. writeln ("<div id = 'calenderdiv 'style> loading calendar... </div> ");
Var press_tag;
Function changecal (action, year, month)
{
Var strcal;
Switch (action)
{
Case "nextmonth ":
If (month = 11)
{
Month = 1;
Year = year * 1 + 1;
} Else {
Month = month * 1 + 2;
}
Strcal = "<span onmouseover = \" this. className = 'arrow _ over' \ "onmouseout = \" this. className = 'arrow _ out' \ "class = 'arrow _ out' onclick = 'calender (" + year + "," + month + ") 'title = 'Next month' style = 'cursor: hand; '>></span> ";
Break;
Case "premonth ":
If (month = 0)
{
Month = 12;
Year = year * 1-1;
}
Strcal = "<span onmouseover = \" this. className = 'arrow _ over' \ "onmouseout = \" this. className = 'arrow _ out' \ "class = 'arrow _ out' onclick = 'calender (" + year + "," + month + ") 'title = 'style = 'cursor: hand; '> </span> ";
Break;
Case "nextyear ":
Year = year * 1 + 1;
Month = month * 1 + 1;
Strcal = "<span onmouseover = \" this. className = 'arrow _ over' \ "onmouseout = \" this. className = 'arrow _ out' \ "class = 'arrow _ out' onclick = 'calender (" + year + "," + month + ") 'title = 'Next year' style = 'cursor: hand; '>>></span> ";
Break;
Case "preyear ":
Year = year * 1-1;
Month = month * 1 + 1;
Strcal = "<span onmouseover = \" this. className = 'arrow _ over' \ "onmouseout = \" this. className = 'arrow _ out' \ "class = 'arrow _ out' onclick = 'calender (" + year + "," + month + ") 'title = 'previous year' style = 'cursor: hand; '> </span> ";
Break;
Default :;
}
Strcal = "" + strcal + "";
Return (strcal );
}
Function calender (cyear, cmonth)
{
Var d, d_date, d_day, d_month;
// Define the number of days per month Array
Var monthdates = ["31", "28", "31", "30", "31", "30", "31", "31", "30 ", "31", "30", "31"]
D = new Date ();
D_year = d. getYear (); // obtain the year
// Determine the leap month and change monthdates's February to 29
If (d_year % 4 = 0) & (d_year % 100! = 0) | (d_year % 400 = 0) monthdates [1] = "29 ";
If (cyear! = "") | (Cmonth! = ""))
{
// If you have selected the month and year, the current time is changed to the User-Defined time.
D. setYear (cyear );
D. setMonth (cmonth-1 );
D. setDate (1 );
}
D_month = d. getMonth (); // obtain the current month.
D_year = d. getYear (); // obtain the year
D_date = d. getDate (); // get the date
// Fixed the error that showed only two digits in 19XX.
If (d_year <2000) {d_year = d_year + 1900}
// ============ Output calendar ============
Var str;
Str = "<table cellspacing = '0' cellpadding = '0' id = 'calender'> ";
Str + = "<tr> <td id = 'cal _ title' colspan = '7'>"
Str + = changecal ("preyear", d_year, d_month)
Str + = changecal ("premonth", d_year, d_month)
Str + = d_year + "-" + (d_month * 1 + 1)
Str + = changecal ("nextmonth", d_year, d_month)
Str + = changecal ("nextyear", d_year, d_month)
Str + = "</td> </tr> ";
Str + = "<tr id = 'Week '> <td> Su </td> <td> Mo </td> <td> Tu </td> <td> We </td> <td> Th </td> <td> Fr </td> <td> Sa </td> </tr> ";
Str + = "<tr> ";
Var firstday, lastday, totalcounts, firstspace, lastspace, monthdays;
// The number of months to be displayed is several days, which can be obtained using a defined array.
Monthdays = monthdates [d. getMonth ()];
// Set the date to the first day of the month.
D. setDate (1 );
// The first day of the month to be displayed is the day of the week
Firstday = d. getDay ();
// Number of empty cells to be supplemented before 1
Firstspace = firstday;
// Set the date to the last day of the month
D. setDate (monthdays );
// The last day of the month to be displayed is the day of the week
Lastday = d. getDay ();
// The number of empty cells required after the last day
Lastspace = 6-lastday;
// Empty cells + Total Number of days + empty cells are used to control loops.
Totalcounts = firstspace * 1 + monthdays * 1 + lastspace * 1;
// Count: the variable of the Large Loop; f_space: the variable of the loop that outputs the first empty cell; l_space: the variable of the loop that outputs the last empty cell.
Var count, flag, f_space, l_space;
// Flag: after the first empty cell is input, the flag = 1 will not continue this small loop.
Flag = 0;
For (count = 1; count <= totalcounts; count ++)
{
// Flag = 0 at the beginning. First, empty cells are output. After the input, flag = 1. This loop will not be executed in the future.
If (flag = 0)
{
If (firstspace! = 0)
{
For (f_space = 1; f_space <= firstspace; f_space ++)
{
Str + = "<td> </td> ";
If (f_space! = Firstspace) count ++;
}
Flag = 1;
Continue;
}
}
If (count-firstspace) <= monthdays)
{
// Output all days in the month
Curday = d_year + "," + (d_month * 1 + 1) + "," + (count-firstspace) + "|"
Linkday = d_year + "," + (d_month * 1 + 1) + "," + (count-firstspace)
Var today = new Date ();
If (d_year = today. getYear () & (d_month = today. getMonth () & (count-firstspace) = today. getDate ()))
{
// Highlight the current days in the Local System
Str + = "<td> <span class = 'current'>" + (count-firstspace) + "</span> </td> ";
} Else {
// No highlighted part, no logs
Str + = "<td>" + (count-firstspace) + "</td> ";
}
If (count % 7 = 0)
{
If (count <totalcounts)
{
Str + = "</tr> <tr> ";
} Else {
Str + = "</tr> ";
}
}
} Else {
// If the last day of the month has been output, the empty cells are added.
For (l_space = 1; l_space <= lastspace; l_space ++)
{
Str + = "<td> </td> ";
If (l_space! = Lastspace) count ++;
}
Continue;
}
}
Str + = "<tr> <td colspan = '7' style = 'text-indent: 9px; '> <a href = 'HTTP: // www.jb51.net 'title = 'website'> www.sugood.cn </a> </td> </tr> </table>"
Document. getElementById ("calenderdiv"). innerHTML = "<div id = 'calenderdiv '>" + str + "</div> ";
}
// Call a function
Calender ("","")
// -->
</Script>