标签：style blog http color java os io for
好几个月没写博客了，一直在赶项目。项目现在终于处于稳定的状态，只是修修改改。作为后台程序员的我真是苦逼啊，从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 ，或者发到我的邮箱a546558309@163.com
学写js Calender控件,布布扣,bubuko.com
标签：style blog http color java os io for
原文地址：http://www.cnblogs.com/a546558309/p/3926941.html
