好几个月没写博客了，一直在赶项目。项目现在终于处于稳定的状态，只是修修改改。作为后台程序员的我真是苦逼啊，从web到手机端接口我都得写，杂七杂八的事情。。。这两天终于闲下来了，没事儿看了一下关于js日期的一些函数，突然想到了日历控件，于是试着写了一个，作为后台程序员的我水平有限，大家抱着学习的态度看看我写的这个例子吧。。。
首先一个常用的日期函数：Date(year,month,day)
var date=new Date();
获取年份
var year=this.date.getFullYear();
获取月份，这里是月索引所以要+1
var month=this.date.getMonth()+1;
获取当天是几号
var day=this.date.getDate();
获取当天是周几，返回0.周日 1.周一 2.周二 3.周三 4.周四 5.周五 6.周六
var week=this.date.getDay();
获取当月一号是周几
var getWeekDay=function(year,month,day){
var date=new Date(year,month,day);
return date.getDay();
}
获取当月的天数
var getMonthDays=function(year,month){
var date=new Date(year,month,0);
return date.getDate();
}
var monthdays= this.getMonthDays(this.year,this.month);
好了，我们用到的参数就这么多，后面其实就是关于日期对应周几的一些操作和判断，动态的拼接标签，下面就直接把我写的例子发出来：
1 <html>
2 <meta http-equiv="content-type" content="text/html;charset=utf-8">
3 <head>
4 <style type="text/css">
5
6 td{ text-align: center;}
7 </style>
8 <script type="text/javascript">
9
10 window.onload=function(){
11 var Calender=function(){
12 this.Init.apply(this,arguments);
13 }
14 Calender.prototype={
15 Init:function(){
16 this.date=new Date();
17 this.year=this.date.getFullYear();
18 this.month=this.date.getMonth()+1;
19 this.day=this.date.getDate();
20 this.week=this.date.getDay();
21 this.weekstart=this.getWeekDay(this.year, this.month-1, 1);
22 this.monthdays= this.getMonthDays(this.year,this.month);
23 },
24 getMonthDays:function(year,month){
25 var date=new Date(year,month,0);
26 return date.getDate();
27 },
28 getWeekDay:function(year,month,day){
29 var date=new Date(year,month,day);
30 return date.getDay();
31 },
32 View:function(){
33 var tablestr=‘<tr><td colspan="3"></td><td>年:‘+this.year+‘</td><td colspan="3">月：‘+this.month+‘</td></tr>‘;
34 tablestr+=‘<tr><td width="14%">日</td><td width="14%">一</td><td width="14%">二</td><td width="14%">三</td><td width="14%">四</td><td width="14%">五</td><td width="14%">六</td></tr>‘;
35 var index=1;
36 //判断每月的第一天在哪个位置
37 var style=‘‘;
38 if(this.weekstart<7)
39 {
40 tablestr+=‘<tr>‘;
41 for (var i = 0; i <this.weekstart; i++) {
42 tablestr+=‘<td></td>‘;
43 };
44 for (var i = 0; i < 7-this.weekstart; i++) {
45 style=this.day==(i+1)?"background-Color:green;":"";
46 index++;
47 tablestr+=‘<td style="‘+style+‘" val=‘+(this.year+‘-‘+this.month+‘-‘+(i+1))+‘>‘+(i+1)+‘</td>‘;
48 };
49 tablestr+=‘</tr>‘;
50
51 }
52 ///剩余天数对应的位置
53
54 //判断整数行并且对应相应的位置
55 var remaindays=this.monthdays-(7-this.weekstart);
56 var row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1)) ;
57 var count=Math.floor(remaindays/7);
58 for (var i = 0; i < count; i++) {
59 tablestr+=‘<tr>‘;
60 for (var k = 0; k < 7; k++) {
61 style=this.day==(index+k)?"background-Color:green;":"";
62 tablestr+=‘<td style="‘+style+‘" val=‘+(this.year+‘-‘+this.month+‘-‘+(index+k))+‘>‘;
63 tablestr+=index+k;
64 tablestr+=‘</td>‘;
65 };
66 tablestr+=‘</tr>‘;
67 index+=7;
68 };
69
70 //最后剩余的天数对应的位置(不能填充一周的那几天)
71 var remaincols=this.monthdays-(index-1);
72 tablestr+=‘<tr>‘;
73 for (var i = 0; i < remaincols; i++) {
74 style=this.day==index?"background-Color:green;":"";
75 tablestr+=‘<td style="‘+style+‘" val=‘+(this.year+‘-‘+this.month+‘-‘+(index))+‘>‘;
76 tablestr+=index;
77 tablestr+=‘</td>‘;
78 index++;
79 };
80 tablestr+=‘</tr>‘;
81
82 return tablestr;
83 },
84 Render:function(){
85 var table=document.createElement(‘table‘);
86 table.style.border=‘1px solid green‘;
87 table.style.width=‘400px‘;
88 table.style.height=‘auto‘;
89 table.style.cursor=‘pointer‘;
90 table.style.backgroundColor=‘lightgrey‘;
91 table.onclick=function(e){
92 var evt=e||window.event;
93 var target=evt.srcElement||evt.target;
94
95 if(target&&target.getAttribute(‘val‘))
96 {
97
98 alert(target.getAttribute(‘val‘));
99 }
100
101 }
102 var tablestr=this.View();
103 this.tablestr=tablestr;
104 table.innerHTML=tablestr;
105 var div=document.createElement(‘div‘);
106 div.style.width=‘auto‘;
107 div.style.height=‘auto‘;
108 div.appendChild(table);
109
110 ///翻页div
111 var pagerDiv=document.createElement(‘div‘);
112 pagerDiv.style.width=‘auto‘;
113 pagerDiv.style.height=‘auto‘;
114
115 var that=this;
116
117
118 ///重新设置参数
119 var resetPara=function(year,month,day){
120 that.date=new Date(year,month,day);
121 that.year=that.date.getFullYear();
122 that.month=that.date.getMonth()+1;
123 that.day=that.date.getDate();
124 that.week=that.date.getDay();
125 that.weekstart=that.getWeekDay(that.year, that.month-1, 1);
126 that.monthdays= that.getMonthDays(that.year,that.month);
127 }
128
129 //上一页
130 var preBtn=document.createElement(‘input‘);
131 preBtn.type=‘button‘;
132 preBtn.value=‘<‘;
133
134 preBtn.onclick=function(){
135 document.body.removeChild(div);
136 resetPara(that.year,that.month-2,that.day);
137 that.Render();
138
139 }
140 //下一页
141 var nextBtn=document.createElement(‘input‘);
142 nextBtn.type=‘button‘;
143 nextBtn.value=‘>‘;
144
145 nextBtn.onclick=function(){
146 document.body.removeChild(div);
147 resetPara(that.year,that.month,that.day);
148 that.Render();
149
150 }
151
152 pagerDiv.appendChild(preBtn);
153 pagerDiv.appendChild(nextBtn);
154 div.appendChild(pagerDiv);
155
156 var dropDiv=document.createElement(‘div‘);
157 var dropdivstr=‘‘;
158 //选择年份
159 dropdivstr+=‘<select id="ddlYear">‘;
160 for (var i = 1900; i <= 2100; i++) {
161 dropdivstr+=
162 i==that.year
163 ?‘<option value="‘+i+‘" selected="true">‘+i+‘</option>‘
164 : ‘<option value="‘+i+‘">‘+i+‘</option>‘;
165 };
166 dropdivstr+=‘</select>‘;
167
168 //选择月份
169 dropdivstr+=‘<select id="ddlMonth">‘;
170 for (var i = 1; i <= 12; i++) {
171 dropdivstr+=
172 i==that.month
173 ?‘<option value="‘+i+‘" selected="true">‘+i+‘</option>‘
174 : ‘<option value="‘+i+‘">‘+i+‘</option>‘;
175 };
176 dropdivstr+=‘</select>‘;
177 dropDiv.innerHTML=dropdivstr;
178 div.appendChild(dropDiv);
179 document.body.appendChild(div);
180
181
182 ///绑定选择年份和月份的事件
183 var ddlYear=document.getElementById(‘ddlYear‘);
184 var ddlMonth=document.getElementById(‘ddlMonth‘);
185
186 ddlYear.onchange=function(){
187 var yearIndex=ddlYear.selectedIndex;
188 var year=ddlYear.options[yearIndex].value;
189 var monthIndex=ddlMonth.selectedIndex;
190 var month=ddlMonth.options[monthIndex].value;
191 document.body.removeChild(div);
192 resetPara(year,month-1,that.day);
193 that.Render();
194 }
195
196 ddlMonth.onchange=function(){
197 var yearIndex=ddlYear.selectedIndex;
198 var year=ddlYear.options[yearIndex].value;
199 var monthIndex=ddlMonth.selectedIndex;
200 var month=ddlMonth.options[monthIndex].value;
201 document.body.removeChild(div);
202 resetPara(year,month-1,that.day);
203 that.Render();
204
205 }
206 }
207
208 }
209
210
211 var calender=new Calender();
212 calender.Render();
213
214 }
215 </script>
216
217
218 </head>
219 <body>
220
221 </body>
222 </html>
上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展，如有疑问或者要交流的东西请加qq546558309 ，或者发到我的邮箱[email protected]
学写js Calender控件
时间： 2024-11-05 13:37:38