由Javascript實現的頁面日曆

：

CSS代碼：

複製代碼 代碼如下:<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 type="text/javascript">
<!--
document.writeln("<div id='calenderdiv' style>日曆載入中...</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='下一個月' 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='下一年' 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='上一年' style='cursor:hand;'><<</span>";
break;
default:;
}
strcal = " " + strcal + " ";
return(strcal);
}
function calender(cyear,cmonth)
{
var d,d_date,d_day,d_month;
//定義每月天數數組
var monthdates = ["31","28","31","30","31","30","31","31","30","31","30","31"]
d = new Date();
d_year = d.getYear(); //擷取年份
//判斷閏月，把monthdates的二月改成29
if (((d_year % 4 == 0) && (d_year % 100 != 0)) || (d_year % 400 == 0)) monthdates[1] = "29";
if ((cyear != "" ) || (cmonth != ""))
{
//如果使用者選擇了月份和年份，則當前的時間改為使用者設定
d.setYear(cyear);
d.setMonth(cmonth-1);
d.setDate(1);
}
d_month = d.getMonth(); //擷取當前是第幾個月
d_year = d.getYear(); //擷取年份
d_date = d.getDate(); //擷取日期
//修正19XX年只顯示兩位的錯誤
if(d_year<2000){d_year = d_year + 1900}
//===========輸出日曆===========
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;
//需要顯示的月份共有幾天，可以用已定義的數組來擷取
monthdays = monthdates[d.getMonth()];
//設定日期為月份中的第一天
d.setDate(1);
//需要顯示的月份的第一天是星期幾
firstday = d.getDay();
//1號前面需要補足的的空儲存格的數
firstspace = firstday;
//設定日期為月份的最後一天
d.setDate(monthdays);
//需要顯示的月份的最後一天是星期幾
lastday = d.getDay();
//最後一天后面需要空儲存格數
lastspace = 6 - lastday;
//前空儲存格+總天數+後空儲存格，用來控制迴圈
totalcounts = firstspace*1 + monthdays*1 + lastspace*1;
//count：大迴圈的變數;f_space:輸出前空儲存格的迴圈變數;l_space:用於輸出後空儲存格的迴圈變數
var count,flag,f_space,l_space;
//flag：前空儲存格輸完後令flag=1不再繼續做這個小迴圈
flag = 0;
for(count=1;count<=totalcounts;count++)
{
//一開始flag=0，首先輸出前空儲存格，輸完以後flag=1，以後將不再執行這個迴圈
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)
{
//輸出月份中的所有天數
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()) )
{
//將本地系統中的當前天數高亮
str += "<td><span class='current'>" + (count - firstspace) + "</span></td>";
}else{
//不用高亮的部分,沒有日誌
str += "<td>" + (count - firstspace) + "</td>";
}
if(count%7==0)
{
if(count<totalcounts)
{
str += "</tr><tr>";
}else{
str += "</tr>";
}
}
}else{
//如果已經輸出了月份中的最後一天，就開始輸出後空儲存格補足
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='網站設計'>www.sugood.cn</a></td></tr></table>"
document.getElementById("calenderdiv").innerHTML = "<div id='calenderdiv'>" + str + "</div>";
}
//調用函數
calender("","")
//-->
</script>