|
|
測(cè)試代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
[程序說(shuō)明]主要為calendar類,里面的方法說(shuō)明有:
getFirstDay:獲取每個(gè)月第一天再星期幾
getMonthLen:獲取當(dāng)月總共有多少天
createCalendar:創(chuàng)建日歷方法
clearCalendar:清空TABLE方法
init:運(yùn)行方法
[方法介紹]
getFirstDay中主要用了new Date()的getDay()方法,該方法是用于獲取日期所在星期幾.
但有一個(gè)特別需要注意的地方,就是getDay()方法所獲取的星期數(shù)如下:
星期日為0,星期一為1,星期二為2,星期三為3,星期四為4,星期五為5,星期六為6
getMonthLen方法用于獲取當(dāng)月的天數(shù),也就是目標(biāo)為獲取當(dāng)月最后一天的日期即可.
所以思維是獲取下個(gè)月第一天的0時(shí),然后減去3個(gè)小時(shí)就可以得到當(dāng)月天數(shù).
nextMonth.setHours(nextMonth.getHours() - 3);
減去3小時(shí)的原因參考<<DHTML Cookbook>>是這樣說(shuō)的:三個(gè)小時(shí)的修正用于處理在月份中包含了夏季時(shí)間到冬季時(shí)間的轉(zhuǎn)換時(shí)發(fā)生的日期計(jì)算的異常現(xiàn)象.
但這解釋我也不太理解,所以就直接按照巨人的做法做了,若果有人知道該異?，F(xiàn)象是怎么回事,可以告訴我.
而該方法主要用了Date的setHours()和getDate()方法,分別用于獲得小時(shí)數(shù)和天數(shù).
createCalendar創(chuàng)建日歷的方法,由于我自身本來(lái)寫好了HTML代碼,所以不直接用DOM來(lái)生成,這里主要是寫入日期數(shù).
寫入日期的主要過(guò)程為:
for(var i = 1;i <= monthLen;i++){
calendar.dayTable[i+firstDay-1].innerHTML = i;
}
monthLen為getMonthLen()方法所獲取的當(dāng)月長(zhǎng)度,循環(huán)過(guò)程不應(yīng)該超過(guò)該長(zhǎng)度.
firstDay則由getFirstDay()方法獲得第一天的星期值,只要i+firstDay就可以得到開(kāi)始第一天所在日歷單元格的位置,但由于數(shù)組從0開(kāi)始,所以另外減去1.
在for循環(huán)插入值的過(guò)程中并判斷今天的日期,并為今天加入一個(gè)特別的id="today",代碼如下:
if((i+firstDay-2) == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new Date().getFullYear()){
calendar.dayTable[i+firstDay-1].id = 'today';
}
clearCalendar方法則用來(lái)每次換月的過(guò)程中,清空日歷,主要由for循環(huán)執(zhí)行,過(guò)程比較簡(jiǎn)單,所以不多詳細(xì)介紹.
另外特別說(shuō)明2個(gè)單擊事件,都是換月作用,其中為向前一個(gè)月和向后一個(gè)月:
preMon.onclick = function(){
calendar.createCalendar(form,new Date(calendar.year,calendar.month-1,1));
}
nextMon.onclick = function(){
calendar.createCalendar(form,new Date(calendar.year,calendar.month+1,1));
}
由于把整體的year和month設(shè)置為calendar的屬性,所以只需在過(guò)程中對(duì)其月份進(jìn)行加減即可.
其中由于在onclick事件中,所以this分別指向preMon和nextMon,所以在內(nèi)部不使用this,直接使用calendar.在createCalendar不使用this也是這個(gè)原因.
[使用說(shuō)明]
HTML和CSS樣式可以自行修改,但是整體不做太大改變的情況下.直接待用calendar類,并且使用init方法,把日歷HTML的id調(diào)入即可,如下:
calendar.init(calendars);
在整個(gè)過(guò)程中,需要注意的就是getFirstDay()和getMonthLen()方法的思維,只要了解了主要的部分.輸入日期的方法可以有很多.
改程序還有許多需要改進(jìn)的地方,希望大家給點(diǎn)意見(jiàn).~`尤其是在代碼里面,有哪些地方需要注意的,本人寫的代碼不太多,所以希望各位給與批評(píng),然后我能發(fā)現(xiàn)錯(cuò)誤進(jìn)行改正.
JavaScript技術(shù)：簡(jiǎn)單JavaScript日歷及詳細(xì)說(shuō)明，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
