一起學寫js Calender日歷控件_

1、一起學寫js Calender日歷控件_ 這篇文章主要和大家一起學寫js Calender控件，自己動手編寫了一個簡易日歷控件，感愛好的小伙伴們可以參考一下 最近看了一下關于js日期的一些函數(shù)，突然想到了日歷控件，于是試著寫了一個，作為后臺程序員的我水平有限，大家抱著學習的看法看看我寫的這個例子吧，一起學習進步！ 首先一個常用的日期函數(shù)： Date(year,month,day) var date=new Date(); 獵取年份 var year=this.date.getFullYear(); 獵取月份，這里是月索引所以要+1 var month=this.date.getMonth()+

2、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) 獵取當月的天數(shù) var getMonthDays=

3、function(year,month) var date=new Date(year,month,0); return date.getDate(); var monthdays= this.getMonthDays(this.year,this.month); 好了，我們用到的參數(shù)就這么多，后面其實就是關于日期對應周幾的一些操作和推斷，動態(tài)的拼接標簽，下面就挺直把我寫的例子發(fā)出來： 效果圖： html meta http-equiv=content-type content=text/html;charset=utf-8 head style type=text/css td text-a

4、lign: center; /style script type=text/javascript window.onload=function() var Calender=function() this.Init.apply(this,arguments); Ctotype= Init:function(container,options) this.date=new Date(); this.year=this.date.getFullYear(); this.month=this.date.getMonth()+1; this.day=this.date.getDa

5、te(); 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, backgr

6、oundColor: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+=trtd colspan=3/tdtd年:+this.ye

7、ar+/tdtd colspan=3月：+this.month+/td/tr; tablestr+=trtd width=14%日/tdtd width=14%一/tdtd width=14%二/tdtd width=14%三/tdtd width=14%四/tdtd width=14%五/tdtd width=14%六/td/tr; var index=1; /推斷每月的第一天在哪個位置 var style=; if(this.weekstart7) tablestr+=tr; for (var i = 0; i this.weekstart; i+) tablestr+=td/td; ;

8、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; /剩余天數(shù)對應的位置 /推斷整數(shù)行并且對應相應的位置 var remaindays=this.monthdays-(7-this.weekstart); var row=Math.floor(remaindays%7=0?re

9、maindays/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

10、+=/tr; index+=7; ; /最終剩余的天數(shù)對應的位置(不能填充一周的那幾天) 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+

11、=/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.backgr

12、oundColor=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(targettarget.getAttribute(val) alert(target.getAttribute(val); var tablestr=this.Vi

13、ew(); 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; /重新設置參數(shù)

14、 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(

15、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; nextB

16、tn.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+=selec

17、t 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

18、: 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.sel