一起學(xué)寫js Calender日歷控件__第1頁(yè)
一起學(xué)寫js Calender日歷控件__第2頁(yè)
一起學(xué)寫js Calender日歷控件__第3頁(yè)
一起學(xué)寫js Calender日歷控件__第4頁(yè)
一起學(xué)寫js Calender日歷控件__第5頁(yè)
已閱讀5頁(yè),還剩8頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

2、1; 獵取當(dāng)天是幾號(hào) var day=this.date.getDate(); 獵取當(dāng)天是周幾,返回0.周日 1.周一 2.周二 3.周三 4.周四 5.周五 6.周六 var week=this.date.getDay(); 獵取當(dāng)月一號(hào)是周幾 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) 獵取當(dāng)月的天數(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ù)就這么多,后面其實(shí)就是關(guān)于日期對(duì)應(yīng)周幾的一些操作和推斷,動(dòng)態(tài)的拼接標(biāo)簽,下面就挺直把我寫的例子發(fā)出來(lái): 效果圖: 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; /推斷每月的第一天在哪個(gè)位置 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ù)對(duì)應(yīng)的位置 /推斷整數(shù)行并且對(duì)應(yīng)相應(yīng)的位置 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ù)對(duì)應(yīng)的位置(不能填充一周的那幾天) 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); /翻頁(yè)div var pagerDiv=document.createElement(div); pagerDiv.style.width=auto; pagerDiv.style.height=auto; var that=this; /重新設(shè)置參數(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); /上一頁(yè) 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(); /下一頁(yè) 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

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論