一起学写js Calender日历控件

最近看了一下关于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（）;}   varweekstart= getWeekDay（this.year, this.month-1, 1）

获取当月的天数

var getMonthDays=function（year,month）{var date=new Date（year,month,0）;return date.getDate（）;}varmonthdays= this.getMonthDays（this.year,this.month）;

好了，我们用到的参数就这么多，后面其实就是关于日期对应周几的一些操作和判断，动态的拼接标签，下面就直接把我写的例子发出来：

效果图：

<html><meta http-equiv="content-type" content="text/html;charset=utf-8"><head><style type="text/css">td{ text-align: center;}</style><script type="text/javascript"> window.onload=function（）{varCalender=function（）{this.Init.apply（this,arguments）;}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（）;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）;this.options=options！=null?options:{border:"1px solid green",width:"400px",height:"200px",backgroundColor:"lightgrey",fontColor:"blue"}},getMonthDays:function（year,month）{var date=new Date（year,month,0）;return date.getDate（）;},getWeekDay:function（year,month,day）{var date=new Date（year,month,day）;return date.getDay（）;},View:function（）{var tablestr="<table>"; tablestr+="<tr><td colspan="3"></td><td>年:"+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><td width="14%">五</td><td width="14%">六</td></tr>";var index=1;//判断每月的第一天在哪个位置var style="";if（this.weekstart<7）{tablestr+="<tr>"; for （var i = 0; i <this.weekstart; i++） { tablestr+="<td></td>"; }; for （var i = 0; i < 7-this.weekstart; i++） {style=this.day==（i+1）?"background-Color:green;":""; index++; tablestr+="<td style=""+style+"" val="+（this.year+"-"+this.month+"-"+（i+1））+">"+（i+1）+"</td>"; };tablestr+="</tr>";}///剩余天数对应的位置//判断整数行并且对应相应的位置var remaindays=this.monthdays-（7-this.weekstart）;var row=Math.floor（remaindays%7==0?remaindays/7:（（remaindays/7）+1）） ;varcount=Math.floor（remaindays/7）;for （var i = 0; i < count; i++） { tablestr+="<tr>"; for （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））+">"; tablestr+=index+k; tablestr+="</td>"; }; tablestr+="</tr>"; index+=7;};//最后剩余的天数对应的位置（不能填充一周的那几天）var remaincols=this.monthdays-（index-1）;tablestr+="<tr>";for （var i = 0; i < remaincols; i++） {style=this.day==index?"background-Color:green;":"";tablestr+="<td style=""+style+"" val="+（this.year+"-"+this.month+"-"+（index））+">";tablestr+=index;tablestr+="</td>";index++;};tablestr+="</tr>";tablestr+="</table>";return tablestr;},Render:function（）{var calenderDiv=document.createElement（"div"）;calenderDiv.style.border=this.options.border;calenderDiv.style.width=this.options.width;calenderDiv.style.height=this.options.height;calenderDiv.style.cursor="pointer";calenderDiv.style.backgroundColor=this.options.backgroundColor;// calenderDiv.style.color=this.options.fontColor;calenderDiv.style.color="red" ;calenderDiv.onclick=function（e）{var evt=e||window.event;vartarget=evt.srcElement||evt.target;if（target&&target.getAttribute（"val"））{alert（target.getAttribute（"val"））;}}var tablestr=this.View（）;this.tablestr=tablestr;calenderDiv.innerHTML=tablestr;var div=document.createElement（"div"）;div.style.width="auto";div.style.height="auto"; div.appendChild（calenderDiv）; ///翻页divvar pagerDiv=document.createElement（"div"）;pagerDiv.style.width="auto";pagerDiv.style.height="auto";var that=this;///重新设置参数varresetPara=function（year,month,day）{that.date=new Date（year,month,day）;that.year=that.date.getFullYear（）;that.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）;that.monthdays= that.getMonthDays（that.year,that.month）;}//上一页var preBtn=document.createElement（"input"）; preBtn.type="button"; preBtn.value="<"; preBtn.onclick=function（）{ that.containerDiv.removeChild（div）; resetPara（that.year,that.month-2,that.day）; that.Render（）; } //下一页 var nextBtn=document.createElement（"input"）; nextBtn.type="button"; nextBtn.value=">";nextBtn.onclick=function（）{ that.containerDiv.removeChild（div）; resetPara（that.year,that.month,that.day）; that.Render（）; } pagerDiv.appendChild（preBtn）; pagerDiv.appendChild（nextBtn）; div.appendChild（pagerDiv）; var dropDiv=document.createElement（"div"）; vardropdivstr=""; //选择年份 dropdivstr+="<select id="ddlYear">"; for （var i = 1900; i <= 2100; i++） {dropdivstr+= i==that.year?"<option value=""+i+"" selected="true">"+i+"</option>": "<option value=""+i+"">"+i+"</option>"; }; dropdivstr+="</select>";//选择月份dropdivstr+="<select id="ddlMonth">"; for （var i = 1; i <= 12; i++） {dropdivstr+=i==that.month?"<option value=""+i+"" selected="true">"+i+"</option>": "<option value=""+i+"">"+i+"</option>"; }; dropdivstr+="</select>"; dropDiv.innerHTML=dropdivstr; div.appendChild（dropDiv）;that.containerDiv.appendChild（div）; ///绑定选择年份和月份的事件 var ddlChange=function（）{ var ddlYear=document.getElementById（"ddlYear"）;var ddlMonth=document.getElementById（"ddlMonth"）;varyearIndex=ddlYear.selectedIndex;var year=ddlYear.options[yearIndex].value;varmonthIndex=ddlMonth.selectedIndex;var month=ddlMonth.options[monthIndex].value;that.containerDiv.removeChild（div）;resetPara（year,month-1,that.day）;that.Render（）; }ddlYear.onchange=function（）{ ddlChange（）;} ddlMonth.onchange=function（）{ ddlChange（）;}}}varcalender=new Calender（"dvTest",{border:"1px solid green",width:"400px",height:"200px",backgroundColor:""}）;calender.Render（）; }</script></head><body> <div id="dvTest"></div></body></html>

代码重新做了改动，将视图的table换为了div,是为了解决IE的tableinnerHTML的只读问题。另外加了options是为了可配置性。
上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展，希望这篇文章可以给大家一些启发。