首页 > 代码库 > 学写js Calender控件
学写js Calender控件
好几个月没写博客了，一直在赶项目。项目现在终于处于稳定的状态，只是修修改改。作为后台程序员的我真是苦逼啊，从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 ///翻页div111 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.year163 ?‘<option value="http://www.mamicode.com/‘+i+‘" selected="true">‘+i+‘</option>‘164 : ‘<option value="http://www.mamicode.com/‘+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.month173 ?‘<option value="http://www.mamicode.com/‘+i+‘" selected="true">‘+i+‘</option>‘174 : ‘<option value="http://www.mamicode.com/‘+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 ，或者发到我的邮箱a546558309@163.com
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。