JavaScript blog式日歷控件新算法

2019-11-21 01:38:15

字體：大中小

來源：轉載

供稿：網友

使用說明：

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

一般SelectDay設置成選擇了的日期，并在onSelectDay中設置一個函數用來設置這個日期的樣式，
例如實例里SelectDay設置成今個月10號并在那天樣式設為onSelect：

復制代碼代碼如下:

SelectDay: new Date().setDate(10), 
onSelectDay: function(o){ o.className = "onSelect"; }, 

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

onToday: function(o){ o.className = "onToday"; },
在onFinish中可以放需要設置日歷的程序。
可以通過this.Year和this.Month獲取當前日歷顯示的年份和月份。
對有數據的日期的也在這里設置，例如實例中是有一個當前月份的有數據的日期列表，然后根據這個列表對相應的日期進行設置：

復制代碼代碼如下:

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>"; 
} 

實例中是固定了這個日期列表，實際應用中可以根據年份月份獲取對應的日期列表，
個人推薦用年份月份通過ajax獲取。

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

測試代碼：

<!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_武林網</title> </head> <body> <script type="text/javascript"> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var Calendar = Class.create(); Calendar.prototype = { initialize: function(container, options) { this.Container = $(container);//容器(table結構) this.Days = [];//日期對象列表 this.SetOptions(options); this.Year = this.options.Year; this.Month = this.options.Month; this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null; this.onSelectDay = this.options.onSelectDay; this.onToday = this.options.onToday; this.onFinish = this.options.onFinish; this.Draw(); }, //設置默認屬性 SetOptions: function(options) { this.options = {//默認值 Year: new Date().getFullYear(),//顯示年 Month: new Date().getMonth() + 1,//顯示月 SelectDay: null,//選擇日期 onSelectDay: function(){},//在選擇日期觸發 onToday: function(){},//在當天日期觸發 onFinish: function(){}//日歷畫完后觸發 }; Object.extend(this.options, options || {}); }, //上一個月 PreMonth: function() { //先取得上一個月的日期對象 var d = new Date(this.Year, this.Month - 2, 1); //再設置屬性 this.Year = d.getFullYear(); this.Month = d.getMonth() + 1; //重新畫日歷 this.Draw(); }, //下一個月 NextMonth: function() { var d = new Date(this.Year, this.Month, 1); this.Year = d.getFullYear(); this.Month = d.getMonth() + 1; this.Draw(); }, //畫日歷 Draw: function() { //用來保存日期列表 var arr = []; //用當月第一天在一周中的日期值作為當月離第一天的天數 for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(" "); } //用當月最后一天在一個月中的日期值作為當月的天數 for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); } var frag = document.createDocumentFragment(); this.Days = []; while(arr.length > 0){ //每個星期插入一個tr var row = document.createElement("tr"); //每個星期有7天 for(var i = 1; i <= 7; i++){ var cell = document.createElement("td"); cell.innerHTML = " "; if(arr.length > 0){ var d = arr.shift(); cell.innerHTML = d; if(d > 0){ this.Days[d] = cell; //判斷是否今日 if(this.IsSame(new Date(this.Year, this.Month - 1, d), new Date())){ this.onToday(cell); } //判斷是否選擇日期 if(this.SelectDay && this.IsSame(new Date(this.Year, this.Month - 1, d), this.SelectDay)){ this.onSelectDay(cell); } } } row.appendChild(cell); } frag.appendChild(row); } //先清空內容再插入(ie的table不能用innerHTML) while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); } this.Container.appendChild(frag); this.onFinish(); }, //判斷是否同一日 IsSame: function(d1, d2) { return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate()); } }; </script> <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> <div   id="iwvjtn8m0"   class="Calendar"> <div   class="iwvjtn8m0"   id="idCalendarPre"><<</div> <div   class="iwvjtn8m0"   id="idCalendarNext">>></div> <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月 <table cellspacing="0"> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </thead> <tbody id="idCalendar"> </tbody> </table> </div> <script language="JavaScript"> var cale = new Calendar("idCalendar", { SelectDay: new Date().setDate(10), onSelectDay: function(o){ o.className = "onSelect"; }, onToday: function(o){ o.className = "onToday"; }, onFinish: function(){ $("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month; 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>"; } } }); $("idCalendarPre").onclick = function(){ cale.PreMonth(); } $("idCalendarNext").onclick = function(){ cale.NextMonth(); } </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：Javascript 讀后臺cookie代碼

下一篇：JavaScript 漸變效果頁面圖片控制第1/2頁