JavaScript blog式日歷控件新算法

2024-05-06 14:17:18

字體：大中小

供稿：網(wǎng)友

使用說明：

程序比較簡(jiǎn)單，代碼中都有說明，這里說說怎么使用。
首先是實(shí)例化一個(gè)Calendar，并設(shè)置參數(shù)。
參數(shù)說明：
Year:要顯示的年份
Month:要顯示的月份
SelectDay:選擇日期
onSelectDay:在選擇日期觸發(fā)
onToday:在當(dāng)天日期觸發(fā)
onFinish:日歷畫完后觸發(fā)

一般SelectDay設(shè)置成選擇了的日期，并在onSelectDay中設(shè)置一個(gè)函數(shù)用來設(shè)置這個(gè)日期的樣式，
例如實(shí)例里SelectDay設(shè)置成今個(gè)月10號(hào)并在那天樣式設(shè)為onSelect：
代碼如下:
SelectDay: new Date().setDate(10),
onSelectDay: function(o){ o.className = "onSelect"; },

而onToday就用來設(shè)置今日日期的樣式，
例如實(shí)例里面把今天的日期的樣式設(shè)為onToday：

onToday: function(o){ o.className = "onToday"; },
在onFinish中可以放需要設(shè)置日歷的程序。
可以通過this.Year和this.Month獲取當(dāng)前日歷顯示的年份和月份。
對(duì)有數(shù)據(jù)的日期的也在這里設(shè)置，例如實(shí)例中是有一個(gè)當(dāng)前月份的有數(shù)據(jù)的日期列表，然后根據(jù)這個(gè)列表對(duì)相應(yīng)的日期進(jìn)行設(shè)置：
代碼如下:
var flag = [10,15,20];
for(var i = 0, len = flag.length; i < len; i++){
this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=/"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;/">" + flag[i] + "</a>";
}
實(shí)例中是固定了這個(gè)日期列表，實(shí)際應(yīng)用中可以根據(jù)年份月份獲取對(duì)應(yīng)的日期列表，
個(gè)人推薦用年份月份通過ajax獲取。

程序中還有兩個(gè)有用的方法PreMonth（顯示上一個(gè)月）和NextMonth（顯示下一個(gè)月）。

測(cè)試代碼：

<!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=gb2312" /> <title>blog式日歷控件_m.survivalescaperooms.com_錯(cuò)新站長(zhǎng)站</title> </head> <body>  <style type="text/css"> .Calendar { font-family:Verdana; font-size:12px; background-color:#e0ecf9; text-align:center; width:200px; height:160px; padding:10px; line-height:1.5em; } .Calendar a{ color:#1e5494; } .Calendar table{ width:100%; border:0; } .Calendar table thead{color:#acacac;} .Calendar table td { font-size: 11px; padding:1px; } #idCalendarPre{ cursor:pointer; float:left; padding-right:5px; } #idCalendarNext{ cursor:pointer; float:right; padding-right:5px; } #idCalendar td.onToday { font-weight:bold; color:#C60; } #idCalendar td.onSelect { font-weight:bold; } </style>  << >> 2008年 8月 <table cellspacing="0"> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </thead>   </table>   </body> </html>

上一篇：Javascript 讀后臺(tái)cookie代碼

下一篇：js直接編輯當(dāng)前cookie的腳本