您當前位置：首頁 > web前端 > jscript > JavaScript制作的簡單日歷(附詳解)

JavaScript制作的簡單日歷(附詳解)

來源：程序員人生發布時間：2013-10-18 10:00:41 閱讀次數：3255次

網(LieHuo.Net)教程 JavaScript制作的簡單日歷(附詳解)

[程序說明]主要為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+firstDay-2) == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new Date().getFullYear()){
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()方法的思維,只要了解了主要的部分.輸入日期的方法可以有很多.
改程序還有許多需要改進的地方,希望大家給點意見.~`尤其是在代碼里面,有哪些地方需要注意的,本人寫的代碼不太多,所以希望各位給與批評,然后我能發現錯誤進行改正.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>JavaScript制作的簡單日歷(附詳解) - LIEHUO.NET</title><style type="text/css">#calendar{background:#000;color:#FFF;font-size:0.8em;}#tittle{font-size:1.4em;padding:4px 0.55em;}#days th {font-weight:bold;text-align:center;padding:4px 0.55em;}#calendar td{text-align:center;padding:4px 0.55em;}#today{color:#F00;font-weight:bold;}</style><script type="text/javascript">var calendar = { dayTable:null, //初始化TABLE year:null, //初始化年 month:null, //初始化月份 getFirstDay:function(year,month){ //獲取每個月第一天再星期幾 var firstDay = new Date(year,month,1); return firstDay.getDay(); //getDay()方法來獲取 }, getMonthLen:function(year,month){ //獲取當月總共有多少天 var nextMonth = new Date(year,month+1,1); //獲取下個月的第一天 nextMonth.setHours(nextMonth.getHours() - 3); //由于獲取的天是0時,所以減去3小時則可以得出該月的天數 return nextMonth.getDate(); //返回當天日期 }, createCalendar:function(form,date){ //創建日歷方法 calendar.year = date.getFullYear(); //獲得當時的年份,并賦值到calendar屬性year中,以便別的方法的調用 calendar.month = date.getMonth(); //跟上面獲取年份的目的一樣 form.getElementsByTagName('th')[1].innerHTML = calendar.year + '年 ' + (calendar.month + 1) + '月'; //插入年份和月份 calendar.clearCalendar(form); //清空TABLE var monthLen = calendar.getMonthLen(calendar.year,calendar.month); //獲取月份長度 var firstDay = calendar.getFirstDay(calendar.year,calendar.month); //獲取月份首天為星期幾 for(var i = 1;i <= monthLen;i++){ //循環寫入每天的值進入TABLE中 calendar.dayTable[i+firstDay-1].innerHTML = i; //i為循環值,加上第一天的星期值剛可以對應TABLE位置,但由于數組從0開始算,所以需要減去1 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:function(form){ //清空TABLE方法 this.dayTable = form.getElementsByTagName('td'); for(var i = 0;i < this.dayTable.length;i++){ this.dayTable[i].innerHTML = ' '; this.dayTable[i].id = ''; } }, init:function(form){ //主方法 this.dayTable = form.getElementsByTagName('td'); this.createCalendar(form,new Date()); var preMon = form.getElementsByTagName('th')[0]; var nextMon = form.getElementsByTagName('th')[2]; preMon.onclick = function(){ //當點擊左按鈕時,減去一個月,并重繪TABLE calendar.createCalendar(form,new Date(calendar.year,calendar.month-1,1)); } nextMon.onclick = function(){ //當點擊右按鈕時,加上一個月,并重繪TABLE calendar.createCalendar(form,new Date(calendar.year,calendar.month+1,1)); } } }window.onload = function(){ var calendars = document.getElementById('calendar'); calendar.init(calendars);}</script></head><body><table id="calendar" cellspacing="0"><tr><th style="cursor:pointer;cursor:hand;"><<</th><th id="tittle" colspan="5"> </th><th style="cursor:pointer;cursor:hand;">>></th></tr><tr id="days"><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table></body></html><br /><center>網更多教程，請訪問：<a href=http://www.vxbq.cn/ target=_blank _fcksavedurl="http://www.vxbq.cn/ target=_blank">http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 解決IE6 select z-index無效，遮擋div的bug

下一篇 Access入門教程 13.4 為Web頁取名

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

JavaScript制作的簡單日歷(附詳解)