一个js写的日历(代码部分网摘)


Posted in Javascript onSeptember 20, 2009

特意贴出这段代码,因为它的代码简洁和清晰,觉得不错,供大家分享。
×××××××函数定义部分

<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); 
} 
} 
} 
var 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 || new Date().getFullYear(); 
this.Month = this.options.Month || new Date().getMonth() + 1; 
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: 0,//显示年 
Month: 0,//显示月 
SelectDay: null,//选择日期 
onSelectDay: function(){},//在选择日期触发 
onToday: function(){},//在当天日期触发 
onFinish: function(){}//日历画完后触发 
}; 
Extend(this.options, options || {}); 
}, 
//当前月 
NowMonth: function() { 
this.PreDraw(new Date()); 
}, 
//上一月 
PreMonth: function() { 
this.PreDraw(new Date(this.Year, this.Month - 2, 1)); 
}, 
//下一月 
NextMonth: function() { 
this.PreDraw(new Date(this.Year, this.Month, 1)); 
}, 
//上一年 
PreYear: function() { 
this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1)); 
}, 
//下一年 
NextYear: function() { 
this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1)); 
}, 
//根据日期画日历 
PreDraw: function(date) { 
//再设置属性 
this.Year = date.getFullYear(); this.Month = date.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(0); } 
//用当月最后一天在一个月中的日期值作为当月的天数 
for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); } 
//清空原来的日期对象列表 
this.Days = []; 
//插入日期 
var frag = document.createDocumentFragment(); 
while(arr.length){ 
//每个星期插入一个tr 
var row = document.createElement("tr"); 
//每个星期有7天 
for(var i = 1; i <= 7; i++){ 
var cell = document.createElement("td"); cell.innerHTML = " "; 
if(arr.length){ 
var d = arr.shift(); 
if(d){ 
cell.innerHTML = d; 
this.Days[d] = cell; 
var on = new Date(this.Year, this.Month - 1, d); 
//判断是否今日 
this.IsSame(on, new Date()) && this.onToday(cell); 
//判断是否选择日期 
this.SelectDay && this.IsSame(on, 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:400px; 
height:180px; 
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; 
} 
#buttonposition{ 
margin-left: 10%; 
} 
</style>

***********下面是应用的主体部分
<div class="Calendar"> 
<div id="idCalendarPre"><<</div> 
<div id="idCalendarNext">>></div> 
<span id="idCalendarYear"></span>年 <span id="idCalendarMonth"></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> 
<div id="buttonposition" ><!-- 通过id获取样式 --> 
<input id="idCalendarPreYear" type="button" class="bt" value="上一年" /> 
<input id="idCalendarNow" type="button" class="bt" value="当前月" /> 
<input id="idCalendarNextYear" type="button" class="bt" value="下一年" /> 
</div> 
<script language="JavaScript"> 
var cale = new Calendar("idCalendar", { 
onToday: function(o){ o.className = "onToday"; }, 
onFinish: function(){ 
$("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month; 
} 
}); 
$("idCalendarPre").onclick = function(){ cale.PreMonth(); } 
$("idCalendarNext").onclick = function(){ cale.NextMonth(); } 
$("idCalendarPreYear").onclick = function(){ cale.PreYear(); } 
$("idCalendarNextYear").onclick = function(){ cale.NextYear(); } 
$("idCalendarNow").onclick = function(){ cale.NowMonth(); } 
</script> 
</div>
Javascript 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
js调试系列 初识控制台
Jun 18 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 #Javascript
js表格分页实现代码
Sep 18 #Javascript
ext 同步和异步示例代码
Sep 18 #Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 #Javascript
jQuery 事件队列调整方法
Sep 18 #Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 #Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 #Javascript
You might like
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python全局变量引用与修改过程解析
2020/01/07 Python
python 5个顶级异步框架推荐
2020/09/09 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
治超工作实施方案
2014/05/04 职场文书
法学自荐信
2014/06/20 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
先进班组事迹材料
2014/12/25 职场文书
节水倡议书
2015/01/19 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL
Java使用HttpClient实现文件下载
2022/08/14 Java/Android