一个月历的源代码，以供学习。

Apollo47 2003-08-04 01:33:33

最近闲来无事，写一个月历，将源码粘贴在此，以供大家学习。
将下面代码粘贴到一个html的文件中即可，若你觉得还可以，请Up这个帖子，以便更多的人能看到它。
你还可以在这个月历的基础上修改，做成一个年历。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<html>
<head><title> </title></head>

<style type="text/css">

</style>

<script language="JavaScript">
var gYear, gMonth, gDay;
var days = [31,28,31,30,31,30,31,31,30,31,30,31];

function getDateStr(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+"-"+m+"-"+d;
}

function getDate(dateStr){
//alert(dateStr);
return new Date(dateStr);
}

function calendar(d){
var year = d.getFullYear();
var month = d.getMonth();
var day = d.getDate();

gYear = year;
gMonth = month+1;
gDay = day;

var rlt = "<table align=center cellspacing=1 border=0 cellspadding=2 bgcolor='#3399CC' width=500>";
// 月历的标题行。
rlt += "<tr title='双击回到当天'><td align=center bgcolor='#FFFF00' colspan=7 onDblClick='today()'>"
+ "<a href='javascript:prevYear()' title='上一年'> 7</a>  "
+ "<a href='javascript:prevMonth()' title='上一月'>3</a>  "
+ year + "年" + (month+1) + "月  "
+ "<a href='javascript:nextMonth()' title='下一月'>4</a>  "
+ "<a href='javascript:nextYear()' title='下一年'>8</a></td></tr>";
rlt = rlt + "<tr>";
var weeks = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];

for(var i=0; i<weeks.length; i++){ // 月历的星期行。
rlt = rlt + "<td align=center bgcolor='#CCFFFF'>" + weeks[i] + "</td>";
}
rlt = rlt + "</tr><tr>";
var col=0;
var dateStr = year + "/"+ (month + 1) + "/" + 1;
var week = getDate(dateStr).getDay();
var lastDay = days[getDate(year + "/"+ month + "/" + 1).getMonth()]; // 上一个月的天数，补齐开始的空格。
for(var i=0; i<week; i++){ // 用上一个月的日期补齐开始的空格。
rlt = rlt + "<td bgcolor=white align=center><font color=#828282>" + (lastDay-week+i+1) + "</font></td>";
col = col+1;
}
if((year%4==0 && year%100!=0) || (year%400==0)){
days[1] = 29;
}
for(var i=1; i<=days[month]; i++){
rlt = rlt + "<td align=center bgcolor='#FFCCEE' valign=center>";
if(i == day){ // 当天，突出显示。
rlt += "<b><font color=red>" + i + "</font></b></td>";
}else{
rlt += i + "</td>";
}
col = col + 1;
if(col == 7 && i<days[month]){
rlt = rlt + ("</tr><tr>");
col = 0;
}
}

for(var i=col; i<7; i++){ // 用下一个月的日期，补齐末尾的空格。
rlt = rlt + ("<td bgcolor=white align=center><font color=#828282>" + (i-col+1) + "</font></td>");
}
rlt = rlt + "</tr></table>";
//document.writeln(rlt);
return rlt;
}

function drawCalendar(year, month, day){
var dateStr = year + "/" + month + "/" + 1;
var d = getDate(dateStr);
if(day != null){
if(day > days[month-1]){
day = days[month-1];
}
d.setDate(day);
}
document.all.calendar.innerHTML = calendar(d);
}

</script>

<body>
<br><br>
<div align=center id="calendar"> </div>
<br><br>
</body>

<script language="JavaScript">

function prevYear(){
drawCalendar(gYear-1, gMonth, gDay);
}
function nextYear(){
drawCalendar(gYear+1, gMonth, gDay);
}

function prevMonth(){
drawCalendar(gYear, gMonth-1, gDay);
}
function nextMonth(){
drawCalendar(gYear, gMonth+1, gDay);
}

function today(){
var d = new Date();
drawCalendar(d.getFullYear(), d.getMonth()+1, d.getDate());
}

today(); // 初始化页面，显示当前月份的日历。
</script>

</html>

...全文