©2010-2026 宁波自信网络信息技术有限公司 版权所有
客服电话：0574-28810668 投诉电话：18658249818
浙ICP备2021020529号-1 | 浙B2-20240490
关注我们 ：
1、 这篇文章主要和大家一起学写js Calender控件，自己动手编写了一个简易日历控件，感兴趣的小伙伴们可以参考一下 最近看了一下关于js日期的一些函数，突然想到了日历控件，于是试着写了一个，作为后台程序员的我水平有限，大家抱着学习的态度看看我写的这个例子吧，一起学习进步！ 首先一个常用的日期函数： Date(year,month,day) var date=new Date(); 获取年份 var year=this.date.getFullYear(); 获取月份，这里是月索引所以要+1 va
2、r 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){
3、 var date=new Date(year,month,day); return date.getDay(); } var weekstart= getWeekDay(this.year, this.month-1, 1) 获取当月的天数 var getMonthDays=function(year,month){ var date=new Date(year,month,0);
4、 return date.getDate(); } var monthdays= this.getMonthDays(this.year,this.month); 好了，我们用到的参数就这么多，后面其实就是关于日期对应周几的一些操作和判断，动态的拼接标签，下面就直接把我写的例子发出来： 效果图： <html> <meta http-equiv="content-type" content="text/html;charset=utf
5、8"> <head> <style type="text/css"> td{ text-align: center;} </style> <script type="text/javascript"> window.onload=function(){ var Calender=function(){ this.Init.apply(this,arguments); }
6、nbsp; Calender.prototype={ Init:function(container,options){ this.date=new Date(); this.year=this.date.getFullYear(); this.month=this.date.getMonth()+1; this.day=this.date.getDate();
7、nbsp; this.week=this.date.getDay(); this.weekstart=this.getWeekDay(this.year, this.month-1, 1); this.monthdays= this.getMonthDays(this.year,this.month); this.containerDiv=document.getElementById(container); &nb
8、sp; this.options=options!=null?options:{ border:'1px solid green', width:'400px', height:'200px', backgroundColor:'lightgrey', font
9、Color:'blue' } }, getMonthDays:function(year,month){ var date=new Date(year,month,0); return date.getDate(); }, getWeekDay:function(year,month,day){ &
10、nbsp; var date=new Date(year,month,day); return date.getDay(); }, View:function(){ var tablestr='<table>'; tablestr+='<tr><td colspan="3"></td><td>年:'+
11、this.year+'</td><td colspan="3">月：'+this.month+'</td></tr>'; tablestr+='<tr><td width="14%">日</td><td width="14%">一</td><td width="14%">二</td><td width="14%">三</td><td width="14%">四</td>
12、lt;td width="14%">五</td><td width="14%">六</td></tr>'; var index=1; //判断每月的第一天在哪个位置 var style=''; if(this.weekstart<7) {
13、 tablestr+='<tr>'; for (var i = 0; i <this.weekstart; i++) { tablestr+='<td></td>'; }; for (var i = 0; i < 7-this.weekst
14、art; i++) { style=this.day==(i+1)?"background-Color:green;":""; index++; tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td&
15、gt;'; }; tablestr+='</tr>'; } ///剩余天数对应的位置 //判断整数行并且对应相应的位置 var remaindays=this.monthdays-(7-this.weekstart); &nb
16、sp; var row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1)) ; var count=Math.floor(remaindays/7); for (var i = 0; i < count; i++) { tablestr+='<tr>'; f
17、or (var k = 0; k < 7; k++) { style=this.day==(index+k)?"background-Color:green;":""; tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index+k))+'>'; &n
18、bsp; tablestr+=index+k; tablestr+='</td>'; }; tablestr+='</tr>'; index+=7; };
19、 //最后剩余的天数对应的位置(不能填充一周的那几天) var remaincols=this.monthdays-(index-1); tablestr+='<tr>'; for (var i = 0; i < remaincols; i++) { style=this.day==index?"background-Color:green;":"";
20、nbsp; tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index))+'>'; tablestr+=index; tablestr+='</td>'; index++; }; &n
21、bsp; tablestr+='</tr>'; tablestr+='</table>'; return tablestr; }, Render:function(){ var calenderDiv=document.createElement('div'); calenderDiv.style.border=t
22、his.options.border; calenderDiv.style.width=this.options.width; calenderDiv.style.height=this.options.height; calenderDiv.style.cursor='pointer'; calenderDiv.style.backgroundColor=this.options.backgroundC
23、olor; // calenderDiv.style.color=this.options.fontColor; calenderDiv.style.color='red' ; calenderDiv.onclick=function(e){ var evt=e||window.event; var target=ev
24、t.srcElement||evt.target; if(target&&target.getAttribute('val')) { alert(target.getAttribute('val')); } } var tab
25、lestr=this.View(); this.tablestr=tablestr; calenderDiv.innerHTML=tablestr; var div=document.createElement('div'); div.style.width='auto'; div.style.height='auto';
26、nbsp; div.appendChild(calenderDiv); ///翻页div var pagerDiv=document.createElement('div'); pagerDiv.style.width='auto'; pagerDiv.style.height='auto'; var that=thi
27、s; ///重新设置参数 var resetPara=function(year,month,day){ that.date=new Date(year,month,day); that.year=that.date.getFullYear(); t
28、hat.month=that.date.getMonth()+1; that.day=that.date.getDate(); that.week=that.date.getDay(); that.weekstart=that.getWeekDay(that.year, that.month-1, 1); &
29、nbsp; that.monthdays= that.getMonthDays(that.year,that.month); } //上一页 var preBtn=document.createElement('input'); preBtn.type='button'; preBtn.value='<';
30、nbsp; preBtn.onclick=function(){ that.containerDiv.removeChild(div); resetPara(that.year,that.month-2,that.day); that.Render(); &n
31、bsp;} //下一页 var nextBtn=document.createElement('input'); nextBtn.type='button'; nextBtn.value='>'; nextBtn.onclick=fu
32、nction(){ that.containerDiv.removeChild(div); resetPara(that.year,that.month,that.day); that.Render(); } pag
33、erDiv.appendChild(preBtn); pagerDiv.appendChild(nextBtn); div.appendChild(pagerDiv); var dropDiv=document.createElement('div'); var dropdivstr=''; &nb
34、sp;//选择年份 dropdivstr+='<select id="ddlYear">'; for (var i = 1900; i <= 2100; i++) { dropdivstr+= i==that.year ?'<option value="'+
35、i+'" selected="true">'+i+'</option>' : '<option value="'+i+'">'+i+'</option>'; }; dropdivstr+='</select>'; //选择月份 dropdivstr+='<sel
36、ect id="ddlMonth">'; for (var i = 1; i <= 12; i++) { dropdivstr+= i==that.month ?'<option value="'+i+'" selected="true">'+i+'</option>'
37、 : '<option value="'+i+'">'+i+'</option>'; }; dropdivstr+='</select>'; dropDiv.innerHTML=dropdivstr; div.appendChild(dropDiv); that
38、containerDiv.appendChild(div); ///绑定选择年份和月份的事件 var ddlChange=function(){ var ddlYear=document.getElementById('ddlYear'); var ddlMonth=document.getElementById
39、'ddlMonth'); var yearIndex=ddlYear.selectedIndex; var year=ddlYear.options[yearIndex].value; var monthIndex=ddlMonth.selectedIndex; var
40、 month=ddlMonth.options[monthIndex].value; that.containerDiv.removeChild(div); resetPara(year,month-1,that.day); that.Render(); } dd
41、lYear.onchange=function(){ ddlChange(); } ddlMonth.onchange=function(){ ddlChange(); } } } var calender=n
42、ew Calender('dvTest',{ border:'1px solid green', width:'400px', height:'200px', backgroundColor:'' } );
43、calender.Render(); } </script> </head> <body> <div id="dvTest"></div> </body> </html> 代码重新做了改动，将视图的table换为了div,是为了解决IE的tableinnerHTML的只读问题。另外加了options是为了可配置性。 上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展，希望这篇文章可以给大家一些启发。
©2010-2026 宁波自信网络信息技术有限公司 版权所有
客服电话：0574-28810668 投诉电话：18658249818
浙ICP备2021020529号-1 | 浙B2-20240490
关注我们 ：
