




版權(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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年天津市安全員知識(shí)題庫(kù)
- 重慶工程職業(yè)技術(shù)學(xué)院《朗讀與講故事指導(dǎo)》2023-2024學(xué)年第二學(xué)期期末試卷
- 西南民族大學(xué)《古生物學(xué)含實(shí)驗(yàn)》2023-2024學(xué)年第二學(xué)期期末試卷
- 南京農(nóng)業(yè)大學(xué)《教育評(píng)價(jià)與測(cè)量》2023-2024學(xué)年第二學(xué)期期末試卷
- 哈爾濱劍橋?qū)W院《廣告創(chuàng)意與策劃》2023-2024學(xué)年第二學(xué)期期末試卷
- 廣西體育高等??茖W(xué)?!峨姶艌?chǎng)理論與光波導(dǎo)技術(shù)》2023-2024學(xué)年第二學(xué)期期末試卷
- 2025屆河南省周口市西華縣三校聯(lián)考高三上學(xué)期一模歷史試卷
- 贛南師范大學(xué)《幼兒園體育游戲》2023-2024學(xué)年第二學(xué)期期末試卷
- 江蘇聯(lián)合職業(yè)技術(shù)學(xué)院《分子生物學(xué)(英文)》2023-2024學(xué)年第二學(xué)期期末試卷
- 廣州城建職業(yè)學(xué)院《銷售管理》2023-2024學(xué)年第二學(xué)期期末試卷
- 2022年山東司法警官職業(yè)學(xué)院?jiǎn)握姓Z(yǔ)文試題及答案解析
- 2023版北京協(xié)和醫(yī)院重癥醫(yī)學(xué)科診療常規(guī)
- 仁愛版九年級(jí)英語(yǔ)下冊(cè)課文翻譯
- 鋼網(wǎng)驗(yàn)收?qǐng)?bào)告
- 防水補(bǔ)漏工程合同(合同版本)
- 鐵路局中間站管理手冊(cè)
- 監(jiān)理日志表(標(biāo)準(zhǔn)模版)
- H3C-CAS虛擬化平臺(tái)詳細(xì)介紹
- 小學(xué)生韻母in、ing常見漢字與區(qū)分練習(xí)
- 藥房品種類別及數(shù)量清單
- 大學(xué)生安全教育課件(ppt共41張)
評(píng)論
0/150
提交評(píng)論