为了在博客系统中增加日历功能,自己用Javascript编写了个日历,效果还不错,后期将用日历对数据库进行异步读取,获得相应时间发表的文章情况,和百度空间的日历类似:)效果图如下
//相应的Javascript 代码如下(其中求得星期数采用了蔡勒（Zeller）公式)
<script type="text/javascript">
function initDate(year,month)
{
year.innerHTML="";
month.innerHTML="";
MonDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var y = new Date().getFullYear();
var m = new Date().getMonth()+1;
var d = new Date().getDate();
var cdate = new Date().toLocaleDateString();
document.getElementById("cdate").innerHTML="今天是"+cdate;
for (var i = 2008; i < (y+10);i++)
{
year.options.add(new Option(i,i));
}
year.value=y;
for (var i = 1; i <= 12; i++)
{
month.options.add(new Option(i,i));
}
month.value = m;
var n = MonDays[m-1];
if (m == 2 && isLeapYear(year.options[year.selectedIndex].value))
n++;
var day = xq(y,m);
createDay(n,day,y,m);
}
function createDay(n,day,year,month){
for(var i=1;i<=42;i++)
{
document.getElementById("c"+i).innerHTML="";
document.getElementById("c"+i).style.color="#333333";
}
var s;
for(var i=1;i<=n;i++)
{
s=i+day-1;
document.getElementById("c"+s).innerHTML=i;
}
var d = new Date().getDate();
var y = new Date().getFullYear();
var m = new Date().getMonth()+1;
if(year==y && month==m){
s=day+d-1;
document.getElementById("c"+s).style.color="#ffffff";
}
}
function change(year,month)
{
var y = year.options[year.selectedIndex].value;
var m = month.options[month.selectedIndex].value;
var n = MonDays[m - 1];
if ( m == 2 && isLeapYear(y))
{
n++;
}
var day = xq(y,m);
createDay(n,day,y,m);
}
function xq(year,month){
if(month == 1 || month == 2)
{
year=parseInt(year)-1;
month=parseInt(month)+12;
}
var xingqi=Math.floor(21/4)-2*21+parseInt(year)+Math.floor(year/4)+Math.floor(13*(parseInt(month)+1)/5);//星期算法
xingqi = xingqi % 7+1;
xingqi = (xingqi>0) ? xingqi:xingqi+7;
return xingqi;
}
function isLeapYear(year)
{
return( year%4==0 || (year%100 ==0 && year%400 == 0));
}
function previousmonth(year,month)
{
var y = year.options[year.selectedIndex].value;
var m = month.options[month.selectedIndex].value;
if(m!=1 || y!=2008){
if(m>1)
{m--;}
else
{m=12;y--;}
var n = MonDays[m - 1];
if ( m == 2 && isLeapYear(y))
{
n++;
}
year.value=y;
month.value=m;
createDay(n,xq(y,m),y,m);}
else{
alert("日历终点,请往后移动");
}
}
function nextmonth(year,month)
{
var y = year.options[year.selectedIndex].value;
var m = month.options[month.selectedIndex].value;
if(m<12)
{m++;}
else
{m=1;y++;}
var n = MonDays[m - 1];
if ( m == 2 && isLeapYear(y))
{
n++;
}
year.value=y;
month.value=m;
createDay(n,xq(y,m),y,m);
}
</script>
页面的HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WTN日历测试</title>
<style type="text/css">
body
{
background-color:#999999;
margin:0px;
font-family:微软雅黑;
text-align:center;
}
/*日历*/
#wtncalendar
{
border:dashed 1px #990000;
text-align:center;
font-size:9pt;
width:165px;
}
#cdate
{
background:#990000;
cursor:hand;
color:#ffffff;
}
#cselect
{
background:#ffffff;
}
#previousmonth
{
width:10px;
height:10px;
border:solid 0px #666666;
background:url(images/calprevious.jpg);
margin-bottom:4px;
}
#nextmonth
{
width:10px;
height:10px;
border:solid 0px #666666;
background:url(images/calnext.jpg);
margin-bottom:4px;
}
.cal
{
width:20px;
height:18px;
text-align:center;
font-size:9pt;
font-family:Arial;
}
#calitemcontent
{
background-color:#cccccc;
}
#calitemheader
{
border-bottom:solid 1px #666666;
}
</style>
<script type="text/javascript" src="calender.js">
</script>
</head>
<body onload="initDate(document.getElementById('select_year'),document.getElementById('select_month'))">
<div>WTN日历测试</div><br />
<table id="wtncalendar" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="s">
<div id="cselect">
<input id="previousmonth" type="button" onclick="previousmonth(document.getElementById('select_year'),document.getElementById('select_month'))"/>
<select id="select_year" onchange="change(this,document.getElementById('select_month'))"></select>年
<select id="select_month" onchange="change(document.getElementById('select_year'),this)"></select>月
<input id="nextmonth" type="button" onclick="nextmonth(document.getElementById('select_year'),document.getElementById('select_month'))" />
</div>
<div id="cdate" onclick="initDate(document.getElementById('select_year'),document.getElementById('select_month'))">
</div>
</td>
</tr>
<tr>
<td id="calitemcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr id="calitemheader">
<td id="d1" class="cal">
一</td>
<td id="d2" class="cal">
二</td>
<td id="d3" class="cal">
三</td>
<td id="d4" class="cal">
四</td>
<td id="d5" class="cal">
五</td>
<td id="d6" class="cal">
六</td>
<td id="d7" class="cal">
日</td>
</tr>
<tr>
<td id="c1" class="cal">
</td>
<td id="c2" class="cal">
</td>
<td id="c3" class="cal">
</td>
<td id="c4" class="cal">
</td>
<td id="c5" class="cal">
</td>
<td id="c6" class="cal">
</td>
<td id="c7" class="cal">
</td>
</tr>
<tr>
<td id="c8" class="cal">
</td>
<td id="c9" class="cal">
</td>
<td id="c10" class="cal">
</td>
<td id="c11" class="cal">
</td>
<td id="c12" class="cal">
</td>
<td id="c13" class="cal">
</td>
<td id="c14" class="cal">
</td>
</tr>
<tr>
<td id="c15" class="cal">
</td>
<td id="c16" class="cal">
</td>
<td id="c17" class="cal">
</td>
<td id="c18" class="cal">
</td>
<td id="c19" class="cal">
</td>
<td id="c20" class="cal">
</td>
<td id="c21" class="cal">
</td>
</tr>
<tr>
<td id="c22" class="cal">
</td>
<td id="c23" class="cal">
</td>
<td id="c24" class="cal">
</td>
<td id="c25" class="cal">
</td>
<td id="c26" class="cal">
</td>
<td id="c27" class="cal">
</td>
<td id="c28" class="cal">
</td>
</tr>
<tr>
<td id="c29" class="cal">
</td>
<td id="c30" class="cal">
</td>
<td id="c31" class="cal">
</td>
<td id="c32" class="cal">
</td>
<td id="c33" class="cal">
</td>
<td id="c34" class="cal">
</td>
<td id="c35" class="cal">
</td>
</tr>
<tr>
<td id="c36" class="cal">
</td>
<td id="c37" class="cal">
</td>
<td id="c38" class="cal">
</td>
<td id="c39" class="cal">
</td>
<td id="c40" class="cal">
</td>
<td id="c41" class="cal">
</td>
<td id="c42" class="cal">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>