JavaScript簡單日曆

先看看實際的效果： Demo
[程式說明]
主要為calendar類,裡面的方法說明有:
getFirstDay:擷取每個月第一天再星期幾
getMonthLen:擷取當月總共有多少天
createCalendar:建立日曆方法
clearCalendar:清空TABLE方法
init:運行方法

 

[方法介紹]
getFirstDay中主要用了new Date()的getDay()方法,該方法是用於擷取日期所在星期幾.
但有一個特別需要注意的地方,就是getDay()方法所擷取的星期數如下:
星期日為0,星期一為1,星期二為2,星期三為3,星期四為4,星期五為5,星期六為6

getMonthLen方法用於擷取當月的天數,也就是目標為擷取當月最後一天的日期即可.
所以思維是擷取下個月第一天的0時,然後減去3個小時就可以得到當月天數.
nextMonth.setHours(nextMonth.getHours() - 3);
減去3小時的原因參考<<DHTML Cookbook>>是這樣說的:三個小時的修正用於處理在月份中包含了夏季時間到冬季時間的轉換時發生的日期計算的異常現象.
但這解釋我也不太理解,所以就直接按照巨人的做法做了,若果有人知道該異常現象是怎麼回事,可以告訴我.
而該方法主要用了Date的setHours()和getDate()方法,分別用於獲得小時數和天數.

createCalendar建立日曆的方法,由於我自身本來寫好了HTML代碼,所以不直接用DOM來產生,這裡主要是寫入日期數.
寫入日期的主要過程為:
for(var i = 1;i <= monthLen;i++){
       calendar.dayTable[i+firstDay-1].innerHTML = i;
}
monthLen為getMonthLen()方法所擷取的當月長度,迴圈過程不應該超過該長度.
firstDay則由getFirstDay()方法獲得第一天的星期值,只要i+firstDay就可以得到開始第一天所在日曆儲存格的位置,但由於數組從0開始,所以另外減去1.
在for迴圈插入值的過程中並判斷今天的日期,並為今天加入一個特別的id="today",代碼如下:
if(i == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new Date().getFullYear()){

//藍色理想的原文這裡的是i+firstDay-2，我發現貌似無法正確匹配，改成i後，效果正常
       calendar.dayTable[i+firstDay-1].id = 'today';
}

clearCalendar方法則用來每次換月的過程中,清空日曆,主要由for迴圈執行,過程比較簡單,所以不多詳細介紹.

另外特別說明2個單擊事件,都是換月作用,其中為向前一個月和向後一個月:
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設定為calendar的屬性,所以只需在過程中對其月份進行加減即可.
其中由於在onclick事件中,所以this分別指向preMon和nextMon,所以在內部不使用this,直接使用calendar.在createCalendar不使用this也是這個原因.

[使用說明]
HTML和CSS樣式可以自行修改,但是整體不做太大改變的情況下.直接待用calendar類,並且使用init方法,把日曆HTML的id調入即可,如下:
calendar.init(calendars);

在整個過程中,需要注意的就是getFirstDay()和getMonthLen()方法的思維,只要瞭解了主要的部分.輸入日期的方法可以有很多.
改程式還有許多需要改進的地方,希望大家給點意見.~`尤其是在代碼裡面,有哪些地方需要注意的,本人寫的代碼不太多,所以希望各位給與批評,然後我能發現錯誤進行改正.

轉自：藍色理想