新增功能：
1、增加了上一年，下一年，上个月，下个月，今天功能。
2、今天着重显示。
效果如下图展示：
// 根据给定的参数year、month，返回某年某月的天数
//例如： MaxDayOfDate(2012,1) 结果：31
function MaxDayOfDate(year, month) {
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
return 31;
case 4:
case 6:
case 9:
case 11:
return 30;
case 2:
if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
return 29;
}
else {
return 28;
}
default:
return 0;
}
}
//参数d是日期Date类型，根据年份与月份返回某年某月的第一天
//例如：假如今天是：2012年1月16日 ，GetStartDate(new Date()) 结果：Date类型 2012-1-1
function GetStartDate(d) {
d.setDate(1);
return d;
}
//参数d是日期Date类型，根据年份与月份返回某年某月的最后一天
//例如：假如今天是：2012年1月16日 ，GetStartDate(new Date()) 结果：Date类型 2012-1-31
function GetEndDate(d) {
var totalDays = MaxDayOfDate(parseInt(d.getFullYear()), parseInt(d.getMonth() + 1));
d.setDate(totalDays);
return d;
}
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>一步一步理解日历calendar（二）</title>
5 <style type="text/css">
6 *{margin: 0px;padding: 0px;}
7 .calender{text-align: center;}
8 .calender th{background-color: #6666FF;}
9 .calender .today{background-color: Orange;color: Red;font-weight: bold;}
10 </style>
11 <script type="text/javascript">
12 window.onload = function (day) {
13 function MaxDayOfDate(year, month) {
14 switch (month) {
15 case 1:
16 case 3:
17 case 5:
18 case 7:
19 case 8:
20 case 10:
21 case 12:
22 return 31;
23 case 4:
24 case 6:
25 case 9:
26 case 11:
27 return 30;
28 case 2:
29 if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
30 return 29;
31 }
32 else {
33 return 28;
34 }
35 default:
36 return 0;
37 }
38 }
39
40 function GetStartDate(d) {
41 d.setDate(1);
42 return d;
43 }
44
45 function GetEndDate(d) {
46 var totalDays = MaxDayOfDate(parseInt(d.getFullYear()), parseInt(d.getMonth() + 1));
47 d.setDate(totalDays);
48 return d;
49 }
50
51 function calender(start, end) {
52 var html = "<table class='calender' border='1px'><thead><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead>";
53 var days = end.getDate();
54 var week = start.getDay() == 0 ? 7 : start.getDay();
55 var d = new Date();
56 day = d.getDate();
57 for (var i = 1; i <= 42; i++) {
58 if (1 == i % 7 || 1 == i) {
59 html += "<tr>";
60 }
61 if (i >= week && i <= (week + days - 1)) {
62 if (day == (i - week + 1)) {
63 if (d.getFullYear() == start.getFullYear() && d.getMonth() == start.getMonth()) {
64 html += "<td class='today'>" + day + "</td>";
65 }
66 else {
67 html += "<td >" + day + "</td>";
68 }
69 } else if (day < i - week + 1) {
70 html += "<td>" + parseInt(i - week + 1) + "</td>";
71 }
72 else {
73 html += "<td>" + parseInt(i - week + 1) + "</td>";
74 }
75 if (7 == i % 7 || 7 == i) {
76 html += "</tr>";
77 }
78 }
79 else {
80 html += "<td> </td>";
81 }
82 }
83 html += "</table>";
84 return html;
85 }
86 var d = new Date();
87 var y = d.getFullYear();
88 var m = d.getMonth();
89 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
90 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
91 document.getElementById("btnpre").onclick = function () {
92 y = y - 1;
93 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
94 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
95 }
96
97 document.getElementById("btnnext").onclick = function () {
98 y = y + 1;
99 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
100 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
101 }
102
103 document.getElementById("btnmpre").onclick = function () {
104 m = m - 1;
105 if (-1 == m) {
106 y = y - 1;
107 m = 11;
108 }
109 else if (12 == m) {
110 y = y + 1;
111 m = 0;
112 }
113 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
114 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
115 }
116
117 document.getElementById("btnmnext").onclick = function () {
118 m = m + 1;
119 if (-1 == m) {
120 y = y - 1;
121 m = 11;
122 }
123 else if (12 == m) {
124 y = y + 1;
125 m = 0;
126 }
127 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
128 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
129 }
130
131 document.getElementById("btntoday").onclick = function () {
132 var y = d.getFullYear();
133 var m = d.getMonth();
134 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
135 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
136 }
137 }
138 </script>
139 </head>
140 <body>
141 <div id="test">
142 </div>
143 <input id="btnpre" type="button" value="上年" />
144 <input id="btnnext" type="button" value="下年" />
145 <input id="btnmpre" type="button" value="上月" />
146 <input id="btnmnext" type="button" value="下月" />
147 <input id="btntoday" type="button" value="今天" />
148 <div id="lbl">
149 </div>
150 </body>
151 </html>