JavaScriptblog式日歷控件新算法_時間日期

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:39:57

JavaScriptblog式日歷控件新算法_時間日期

JavaScriptblog式日歷控件新算法_時間日期:使用說明：程序比較簡單，代碼中都有說明，這里說說怎么使用。首先是實例化一個Calendar，并設(shè)置參數(shù)。參數(shù)說明： Year:要顯示的年份 Month:要顯示的月份 SelectDay:選擇日期 onSelectDay:在選擇日期觸發(fā) onToday:在當(dāng)天日期觸發(fā) onFinish

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀JavaScriptblog式日歷控件新算法_時間日期:使用說明：程序比較簡單，代碼中都有說明，這里說說怎么使用。首先是實例化一個Calendar，并設(shè)置參數(shù)。參數(shù)說明： Year:要顯示的年份 Month:要顯示的月份 SelectDay:選擇日期 onSelectDay:在選擇日期觸發(fā) onToday:在當(dāng)天日期觸發(fā) onFinish

使用說明：

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

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

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

onToday: function(o){ o.className = "onToday"; },
在onFinish中可以放需要設(shè)置日歷的程序。
可以通過this.Year和this.Month獲取當(dāng)前日歷顯示的年份和月份。
對有數(shù)據(jù)的日期的也在這里設(shè)置，例如實例中是有一個當(dāng)前月份的有數(shù)據(jù)的日期列表，然后根據(jù)這個列表對相應(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 = "" + flag[i] + "";
}
實例中是固定了這個日期列表，實際應(yīng)用中可以根據(jù)年份月份獲取對應(yīng)的日期列表，
個人推薦用年份月份通過ajax獲取。

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

測試代碼：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>blog式日歷控件_www.gxlcms.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結(jié)構(gòu)) 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(); }, //設(shè)置默認(rèn)屬性 SetOptions: function(options) { this.options = {//默認(rèn)值 Year: new Date().getFullYear(),//顯示年 Month: new Date().getMonth() + 1,//顯示月 SelectDay: null,//選擇日期 onSelectDay: function(){},//在選擇日期觸發(fā) onToday: function(){},//在當(dāng)天日期觸發(fā) onFinish: function(){}//日歷畫完后觸發(fā) }; Object.extend(this.options, options || {}); }, //上一個月 PreMonth: function() { //先取得上一個月的日期對象 var d = new Date(this.Year, this.Month - 2, 1); //再設(shè)置屬性 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 = []; //用當(dāng)月第一天在一周中的日期值作為當(dāng)月離第一天的天數(shù) for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(" "); } //用當(dāng)月最后一天在一個月中的日期值作為當(dāng)月的天數(shù) 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); } //先清空內(nèi)容再插入(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> << >> 2008年 8月 <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> <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 = "" + flag[i] + ""; } } }); $("idCalendarPre").onclick = function(){ cale.PreMonth(); } $("idCalendarNext").onclick = function(){ cale.NextMonth(); } </ script> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScriptblog式日歷控件新算法_時間日期

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：日期日歷 blog

熱門焦點

JavaScriptblog式日歷控件新算法_時間日期

JavaScriptblog式日歷控件新算法_時間日期

JavaScriptblog式日歷控件新算法_時間日期

最新推薦

猜你喜歡

熱門推薦