一个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 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
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中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python 26进制计算实现方法
2015/05/28 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
银行主办会计岗位职责
2014/08/13 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
项目投资意向书范本
2015/05/09 职场文书
长征观后感
2015/06/09 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
聘任书格式及范文
2015/09/21 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技