特意贴出这段代码，因为它的代码简洁和清晰，觉得不错，供大家分享。 ×××××××函数定义部分 复制代码 代码如下: <BR>var $ = function (id) { <BR>return "string" == typeof id ? document.getElementById(id) : id; <BR>}; <BR>var Class = { <BR>create: function() { <BR>return function() { <BR>this.initialize.apply(this, arguments); <BR>} <BR>} <BR>} <BR>var Extend = function(destination, source) { <BR>for (var property in source) { <BR>destination[property] = source[property]; <BR>} <BR>return destination; <BR>} <BR>var Calendar = Class.create(); <BR>Calendar.prototype = { <BR>initialize: function(container, options) { <BR>this.Container = $(container);//容器(table结构) <BR>this.Days = [];//日期对象列表 <BR>this.SetOptions(options); <BR>this.Year = this.options.Year || new Date().getFullYear(); <BR>this.Month = this.options.Month || new Date().getMonth() + 1; <BR>this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null; <BR>this.onSelectDay = this.options.onSelectDay; <BR>this.onToday = this.options.onToday; <BR>this.onFinish = this.options.onFinish; <BR>this.Draw(); <BR>}, <BR>//设置默认属性 <BR>SetOptions: function(options) { <BR>this.options = {//默认值 <BR>Year: 0,//显示年 <BR>Month: 0,//显示月 <BR>SelectDay: null,//选择日期 <BR>onSelectDay: function(){},//在选择日期触发 <BR>onToday: function(){},//在当天日期触发 <BR>onFinish: function(){}//日历画完后触发 <BR>}; <BR>Extend(this.options, options || {}); <BR>}, <BR>//当前月 <BR>NowMonth: function() { <BR>this.PreDraw(new Date()); <BR>}, <BR>//上一月 <BR>PreMonth: function() { <BR>this.PreDraw(new Date(this.Year, this.Month - 2, 1)); <BR>}, <BR>//下一月 <BR>NextMonth: function() { <BR>this.PreDraw(new Date(this.Year, this.Month, 1)); <BR>}, <BR>//上一年 <BR>PreYear: function() { <BR>this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1)); <BR>}, <BR>//下一年 <BR>NextYear: function() { <BR>this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1)); <BR>}, <BR>//根据日期画日历 <BR>PreDraw: function(date) { <BR>//再设置属性 <BR>this.Year = date.getFullYear(); this.Month = date.getMonth() + 1; <BR>//重新画日历 <BR>this.Draw(); <BR>}, <BR>//画日历 <BR>Draw: function() { <BR>//用来保存日期列表 <BR>var arr = []; <BR>//用当月第一天在一周中的日期值作为当月离第一天的天数 <BR>for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); } <BR>//用当月最后一天在一个月中的日期值作为当月的天数 <BR>for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); } <BR>//清空原来的日期对象列表 <BR>this.Days = []; <BR>//插入日期 <BR>var frag = document.createDocumentFragment(); <BR>while(arr.length){ <BR>//每个星期插入一个tr <BR>var row = document.createElement("tr"); <BR>//每个星期有7天 <BR>for(var i = 1; i <= 7; i++){ <BR>var cell = document.createElement("td"); cell.innerHTML = " "; <BR>if(arr.length){ <BR>var d = arr.shift(); <BR>if(d){ <BR>cell.innerHTML = d; <BR>this.Days[d] = cell; <BR>var on = new Date(this.Year, this.Month - 1, d); <BR>//判断是否今日 <BR>this.IsSame(on, new Date()) && this.onToday(cell); <BR>//判断是否选择日期 <BR>this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell); <BR>} <BR>} <BR>row.appendChild(cell); <BR>} <BR>frag.appendChild(row); <BR>} <BR>//先清空内容再插入(ie的table不能用innerHTML) <BR>while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); } <BR>this.Container.appendChild(frag); <BR>//附加程序 <BR>this.onFinish(); <BR>}, <BR>//判断是否同一日 <BR>IsSame: function(d1, d2) { <BR>return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate()); <BR>} <BR>} <BR> ××××××××样式表的定义 复制代码 代码如下: <BR>.Calendar { <BR>font-family:Verdana; <BR>font-size:12px; <BR>background-color:#e0ecf9; <BR>text-align:center; <BR>width:400px; <BR>height:180px; <BR>padding:10px; <BR>line-height:1.5em; <BR>} <BR>.Calendar a{ <BR>color:#1e5494; <BR>} <BR>.Calendar table{ <BR>width:100%; <BR>border:0; <BR>} <BR>.Calendar table thead{color:#acacac;} <BR>.Calendar table td { <BR>font-size: 11px; <BR>padding:1px; <BR>} <BR>#idCalendarPre{ <BR>cursor:pointer; <BR>float:left; <BR>padding-right:5px; <BR>} <BR>#idCalendarNext{ <BR>cursor:pointer; <BR>float:right; <BR>padding-right:5px; <BR>} <BR>#idCalendar td.onToday { <BR>font-weight:bold; <BR>color:#C60; <BR>} <BR>#idCalendar td.onSelect { <BR>font-weight:bold; <BR>} <BR>#buttonposition{ <BR>margin-left: 10%; <BR>} <BR> ***********下面是应用的主体部分 复制代码 代码如下: >> 年 月 日 一 二 三 四 五 六 <BR>var cale = new Calendar("idCalendar", { <BR>onToday: function(o){ o.className = "onToday"; }, <BR>onFinish: function(){ <BR>$("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month; <BR>} <BR>}); <BR>$("idCalendarPre").onclick = function(){ cale.PreMonth(); } <BR>$("idCalendarNext").onclick = function(){ cale.NextMonth(); } <BR>$("idCalendarPreYear").onclick = function(){ cale.PreYear(); } <BR>$("idCalendarNextYear").onclick = function(){ cale.NextYear(); } <BR>$("idCalendarNow").onclick = function(){ cale.NowMonth(); } <BR>
