好几个月没写博客了，一直在赶项目。项目现在终于处于稳定的状态，只是修修改改。作为后台程序员的我真是苦逼啊，从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 ///翻页div123 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
新闻热点
疑难解答
