web前端|js教程
js,Calender控件,日历控件
web前端-js教程
最近看了一下关于js日期的一些函数，突然想到了日历控件，于是试着写了一个，作为后台程序员的我水平有限，大家抱着学习的态度看看我写的这个例子吧，一起学习进步！
一元云购程序走势图源码,卸载ubuntu旧内核,爬虫json乱码解决,mecab PHP,seo推荐域名lzw
首先一个常用的日期函数：
网站模板源码是不是网站源码,pe可以装ubuntu,论文爬虫整理系统,php转成word,天水seo托管lzw
Date(year,month,day)
移动端在线抽题答题系统源码,ubuntu如何重新更新,爬虫岗位不长久,PHP好用,seo整合推广lzw
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);
好了，我们用到的参数就这么多，后面其实就是关于日期对应周几的一些操作和判断，动态的拼接标签，下面就直接把我写的例子发出来：
效果图：
td{ text-align: center;} window.onload=function(){ var Calender=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:lue} }, 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=
;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= ed ;calenderDiv.onclick=function(e){ var evt=e||window.event; var target=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; ///重新设置参数var resetPara=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=utton; preBtn.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); var dropdivstr=\; //选择年份 dropdivstr+=\; for (var i = 1900; i <= 2100; i++) { dropdivstr+= i==that.year ?\+i+\ : \+i+\; }; dropdivstr+=\; //选择月份dropdivstr+=\; for (var i = 1; i <= 12; i++) { dropdivstr+= i==that.month ?\+i+\ : \+i+\; }; dropdivstr+=\; dropDiv.innerHTML=dropdivstr; div.appendChild(dropDiv);that.containerDiv.appendChild(div); ///绑定选择年份和月份的事件 var ddlChange=function(){ var ddlYear=document.getElementById(ddlYear);var ddlMonth=document.getElementById(ddlMonth);var yearIndex=ddlYear.selectedIndex;var year=ddlYear.options[yearIndex].value;var monthIndex=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(); } } } var calender=new Calender(dvTest,{ border:1px solid green, width:400px, height:200px, backgroundColor:\ } ); calender.Render(); }
代码重新做了改动，将视图的table换为了div,是为了解决IE的tableinnerHTML的只读问题。另外加了options是为了可配置性。
上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展，希望这篇文章可以给大家一些启发。
