1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <HTML XMLNS:ELEMENT>
3 <html>
4 <head>
5 <title>::calender::</title>
6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
7 <style>
8 body{
9 marign:0px;
10 }
11 #cal{
12 position:absolute;
13 top:0px;
14 left:0px;
15 width:200px;
16 height:225px;
17 background-color:pink;
18 }
19 #cal_head{
20 position:absolute;
21 top:0px;
22 left:0px;
23 width:200px;
24 height:30px;
25 background-color:lightskyblue;
26 }
27 #cal_head_left{
28 position:absolute;
29 top:5px;
30 left:10px;
31 width:20px;
32 height:20px;
33 color:white;
34 font-size:18px;
35 font-family:微软雅黑;
36 font-weight:bold;
37 text-align:center;
38 cursor:pointer;
39 }
40 #cal_head_right{
41 position:absolute;
42 top:5px;
43 left:170px;
44 width:20px;
45 height:20px;
46 color:white;
47 font-size:18px;
48 font-family:微软雅黑;
49 font-weight:bold;
50 text-align:center;
51 cursor:pointer;
52 }
53 #cal_head_title{
54 position:absolute;
55 top:5px;
56 left:50px;
57 width:100px;
58 height:20px;
59 color:white;
60 font-size:14px;
61 font-family:微软雅黑;
62 font-weight:bold;
63 text-align:center;
64 }
65 #cal_head_title_y_butt,#cal_head_title_m_butt{
66 cursor:pointer;
67 }
68 #cal_body_week{
69 position:absolute;
70 top:30px;
71 left:0px;
72 width:200px;
73 height:20px;
74 line-height:20px;
75 color:navy;
76 font-size:14px;
77 font-weight:bold;
78 font-family:微软雅黑;
79 }
80 #cal_body_days{
81 position:absolute;
82 top:55px;
83 left:0px;
84 width:200px;
85 height:140px;
86 background-color:lightpink;
87 font-size:14px;
88 font-weight:bold;
89 font-family:微软雅黑;
90 color:green;
91 }
92 #cal_body_days>div:hover{
93 background-color:yellow;
94 }
95 </style>
96 </head>
97 <body>
98 <div id="cal">
99 <div id="cal_head">
100 <div id="cal_head_left">◀</div>
101 <div id="cal_head_title">
102 <span id="cal_head_title_year">2012</span><span id="cal_head_title_y_butt">年</span><span id="cal_head_title_month">8</span><span id="cal_head_title_m_butt">月</span>
103 </div>
104 <div id="cal_head_right">▶</div>
105 </div>
106 <div id="cal_body">
107 <div id="cal_body_week"></div>
108 <div id="cal_body_days"></div>
109 </div>
110 </div>
111 </body>
112
113 <script type="text/javascript">
114 //判断平年闰年
115 function isLeapYear(year){
116 var flag = false;
117 if((year%4==0 && year%100!=0)||(year%100==0 && year%400==0)){
118 flag = true;
119 }else{
120 flag = false;
121 }
122 return flag;
123 }
124 //返回当前date
125 function getDate(){
126 var d = new Date();
127 var year = d.getYear() < 1900?(1900 + d.getYear()):(d.getYear());
128 var month = d.getMonth() + 1;
129 var date = d.getDate();
130 var day = d.getDay();
131 return {'year':year,'month':month,'date':date,'day':day};
132 }
133 //计算日期
134 var days_p = new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
135 var days_r = new Array(0,31,29,31,30,31,30,31,31,30,31,30,31);
136 function getOtherDays(date,d){
137 var c = parseInt((date.year + "").substring(0,2));
138 var y = parseInt((date.year + "").substring(2,4));
139 var m = date.month;
140 var d = d;
141 //当前月的第一天星期几
142 var firstDay = (y + Math.floor(y/4) + Math.floor(c/4) - 2*c + Math.floor((26*(m + 1)) / 10) + 1 - 1)%7;
143 firstDay = (firstDay % 7 + 7) % 7;
144 var day = (y + Math.floor(y/4) + Math.floor(c/4) - 2*c + Math.floor((26*(m + 1)) / 10) + d - 1)%7;
145 day = (day % 7 + 7) % 7;
146 return {'day':day,'col':Math.floor((firstDay + d - 1) / 7)}
147 }
148 //显示日期
149 function setDays(d) {
150 var index = 0;
151 var dayStr = "";
152 var currentMonth = isLeapYear(d.year)?days_r[d.month]:days_p[d.month];
153
154 for(var i = 1;i <= currentMonth;i++){
155 dayStr += (getDate().date == i)?"<div style='position:absolute;text-align:center;width:27px;cursor:pointer;background-color:yellow;top:" + (getOtherDays(d,i).col * 20 + 10) + ";left:" + (getOtherDays(d,i).day * 27 + 5) + ";'>" + ((getOtherDays(d,i).day == 0 || getOtherDays(d,i).day == 6)?"<font color='#990000'>" + i + "</font>":i) + "</div>":"<div style='position:absolute;text-align:center;width:27px;cursor:pointer;top:" + (getOtherDays(d,i).col * 20 + 10) + ";left:" + (getOtherDays(d,i).day * 27 + 5) + ";'>" + ((getOtherDays(d,i).day == 0 || getOtherDays(d,i).day == 6)?"<font color='#990000'>" + i + "</font>":i) + "</div>";
156 }
157 document.getElementById("cal_body_days").innerHTML = dayStr;
158 }
159 (function(){
160 //初始化
161 var cal_body_week = "";
162 var week = new Array("日","一","二","三","四","五","六");
163 for(var i = 0;i < 7;i++){
164 cal_body_week += "<div style='position:absolute;top:5px;left:" + (i * 27 + 10) + "px;'>" + week[i] + "</div>";
165 }
166 document.getElementById("cal_body_week").innerHTML = cal_body_week;
167
168 setDays(getDate());
169 })();
170
171
172
173 function changeMonth(v){
174 var y = parseInt(document.getElementById("cal_head_title_year").innerHTML);
175 var m = parseInt(document.getElementById("cal_head_title_month").innerHTML);
176
177 if(v == "left"){
178 if(m == 1){
179 y -= 1;
180 m = 12;
181 } else {
182 m -= 1;
183 }
184 }
185 if(v == "right"){
186 if(m == 12){
187 y += 1;
188 m = 1;
189 } else {
190 m += 1;
191 }
192 }
193 setDays({'year':y,'month':m,'date':1,'day':1});
194 document.getElementById("cal_head_title_year").innerHTML = y;
195 document.getElementById("cal_head_title_month").innerHTML = m;
196 }
197
198 document.getElementById("cal_head_left").onclick = function() {
199 changeMonth("left");
200 }
201 document.getElementById("cal_head_right").onclick = function() {
202 changeMonth("right");
203 }
204 </script>
View Code
