一起学写js Calender日历控件

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

一起学写js Calender日历控件

来源：阅读：1160 次日期：2016-07-08 11:04:30

温馨提示：小编为您整理了“一起学写js Calender日历控件”,方便广大网友查阅！

这篇文章主要和大家一起学写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();

}

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);

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

效果图：

<html>

<head>

td{ text-align: center;}

</style>

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:'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)) ;

var count=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;

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);

///翻页div

var 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='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');

var dropdivstr='';

//选择年份

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');

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();

}

</script>

</head>

<body>

</body>

</html>

代码重新做了改动，将视图的table换为了div,是为了解决IE的tableinnerHTML的只读问题。另外加了options是为了可配置性。

上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展，希望这篇文章可以给大家一些启发。

上一篇：详解Jquery实现ready和bind事件

下一篇：jQuery获取父元素节点、子元素节点及兄弟元素节点的方法

手机网站地址：一起学写js Calender日历控件

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！