学写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 weekstart= getWeekDay(this.year, this.month-1, 1)
获取当月的天数
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(container,options){ 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 this.containerDiv=document.getElementById(container); 24 this.options=options!=null?options:{ 25 border:'1px solid green', 26 width:'400px', 27 height:'200px', 28 backgroundColor:'lightgrey', 29 fontColor:'blue' 30 } 31 }, 32 getMonthDays:function(year,month){ 33 var date=new Date(year,month,0); 34 return date.getDate(); 35 }, 36 getWeekDay:function(year,month,day){ 37 var date=new Date(year,month,day); 38 return date.getDay(); 39 }, 40 View:function(){ 41 var tablestr='<table>'; 42 tablestr+='<tr><td colspan="3"></td><td>年:'+this.year+'</td><td colspan="3">月：'+this.month+'</td></tr>'; 43 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>'; 44 var index=1; 45 //判断每月的第一天在哪个位置 46 var style=''; 47 if(this.weekstart<7) 48 { 49 tablestr+='<tr>'; 50 for (var i = 0; i <this.weekstart; i++) { 51 tablestr+='<td></td>'; 52 }; 53 for (var i = 0; i < 7-this.weekstart; i++) { 54 style=this.day==(i+1)?"background-Color:green;":""; 55 index++; 56 tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>'; 57 }; 58 tablestr+='</tr>'; 59 60 } 61 ///剩余天数对应的位置 62 63 //判断整数行并且对应相应的位置 64 var remaindays=this.monthdays-(7-this.weekstart); 65 var row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1)) ; 66 var count=Math.floor(remaindays/7); 67 for (var i = 0; i < count; i++) { 68 tablestr+='<tr>'; 69 for (var k = 0; k < 7; k++) { 70 style=this.day==(index+k)?"background-Color:green;":""; 71 tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index+k))+'>'; 72 tablestr+=index+k; 73 tablestr+='</td>'; 74 }; 75 tablestr+='</tr>'; 76 index+=7; 77 }; 78 79 //最后剩余的天数对应的位置(不能填充一周的那几天) 80 var remaincols=this.monthdays-(index-1); 81 tablestr+='<tr>'; 82 for (var i = 0; i < remaincols; i++) { 83 style=this.day==index?"background-Color:green;":""; 84 tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index))+'>'; 85 tablestr+=index; 86 tablestr+='</td>'; 87 index++; 88 }; 89 tablestr+='</tr>'; 90 tablestr+='</table>'; 91 return tablestr; 92 }, 93 Render:function(){ 94 var calenderDiv=document.createElement('div'); 95 calenderDiv.style.border=this.options.border; 96 calenderDiv.style.width=this.options.width; 97 calenderDiv.style.height=this.options.height; 98 calenderDiv.style.cursor='pointer'; 99 calenderDiv.style.backgroundColor=this.options.backgroundColor; 100 // calenderDiv.style.color=this.options.fontColor; 101 calenderDiv.style.color='red' ; 102 103 calenderDiv.onclick=function(e){ 104 var evt=e||window.event; 105 var target=evt.srcElement||evt.target; 106 107 if(target&&target.getAttribute('val')) 108 { 109 110 alert(target.getAttribute('val')); 111 } 112 113 } 114 var tablestr=this.View(); 115 this.tablestr=tablestr; 116 calenderDiv.innerHTML=tablestr; 117 var div=document.createElement('div'); 118 div.style.width='auto'; 119 div.style.height='auto'; 120 div.appendChild(calenderDiv); 121 122 ///翻页div 123 var pagerDiv=document.createElement('div'); 124 pagerDiv.style.width='auto'; 125 pagerDiv.style.height='auto'; 126 127 var that=this; 128 129 130 ///重新设置参数 131 var resetPara=function(year,month,day){ 132 that.date=new Date(year,month,day); 133 that.year=that.date.getFullYear(); 134 that.month=that.date.getMonth()+1; 135 that.day=that.date.getDate(); 136 that.week=that.date.getDay(); 137 that.weekstart=that.getWeekDay(that.year, that.month-1, 1); 138 that.monthdays= that.getMonthDays(that.year,that.month); 139 } 140 141 //上一页 142 var preBtn=document.createElement('input'); 143 preBtn.type='button'; 144 preBtn.value='<'; 145 146 preBtn.onclick=function(){ 147 that.containerDiv.removeChild(div); 148 resetPara(that.year,that.month-2,that.day); 149 that.Render(); 150 151 } 152 //下一页 153 var nextBtn=document.createElement('input'); 154 nextBtn.type='button'; 155 nextBtn.value='>'; 156 157 nextBtn.onclick=function(){ 158 that.containerDiv.removeChild(div); 159 resetPara(that.year,that.month,that.day); 160 that.Render(); 161 162 } 163 164 pagerDiv.appendChild(preBtn); 165 pagerDiv.appendChild(nextBtn); 166 div.appendChild(pagerDiv); 167 168 var dropDiv=document.createElement('div'); 169 var dropdivstr=''; 170 //选择年份 171 dropdivstr+='<select id="ddlYear">'; 172 for (var i = 1900; i <= 2100; i++) { 173 dropdivstr+= 174 i==that.year 175 ?'<option value="'+i+'" selected="true">'+i+'</option>' 176 : '<option value="'+i+'">'+i+'</option>'; 177 }; 178 dropdivstr+='</select>'; 179 180 //选择月份 181 dropdivstr+='<select id="ddlMonth">'; 182 for (var i = 1; i <= 12; i++) { 183 dropdivstr+= 184 i==that.month 185 ?'<option value="'+i+'" selected="true">'+i+'</option>' 186 : '<option value="'+i+'">'+i+'</option>'; 187 }; 188 dropdivstr+='</select>'; 189 dropDiv.innerHTML=dropdivstr; 190 div.appendChild(dropDiv); 191 that.containerDiv.appendChild(div); 192 193 194 ///绑定选择年份和月份的事件 195 var ddlChange=function(){ 196 var ddlYear=document.getElementById('ddlYear'); 197 var ddlMonth=document.getElementById('ddlMonth'); 198 var yearIndex=ddlYear.selectedIndex; 199 var year=ddlYear.options[yearIndex].value; 200 var monthIndex=ddlMonth.selectedIndex; 201 var month=ddlMonth.options[monthIndex].value; 202 that.containerDiv.removeChild(div); 203 resetPara(year,month-1,that.day); 204 that.Render(); 205 } 206 207 ddlYear.onchange=function(){ 208 ddlChange(); 209 } 210 211 ddlMonth.onchange=function(){ 212 ddlChange(); 213 214 } 215 } 216 217 } 218 219 220 var calender=new Calender('dvTest',{ 221 border:'1px solid green', 222 width:'400px', 223 height:'200px', 224 backgroundColor:'' 225 } 226 ); 227 calender.Render(); 228 229 } 230 </script> 231 232 233 </head> 234 <body> 235 <div id="dvTest"></div> 236 </body> 237 </html>
代码重新做了改动，将视图的table换为了div,是为了解决IE的tableinnerHTML的只读问题。另外加了options是为了可配置性。
上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展，如有疑问或者要交流的东西请加qq546558309 ，或者发到我的邮箱[email protected]