JavaScript日历实现代码


Posted in Javascript onSeptember 12, 2010

效果如下:
JavaScript日历实现代码
javascript 代码如下:

var Calendar = function(){ 
var self = this; self.box = document.createElement("div"); 
self.head = document.createElement("div"); 
self.datePlace; 
self.body = document.createElement("div"); 
self.selectDay; 
self.foot = document.createElement("div"); 
self.timePlace; 
self.dateInfo = { 
"now" : new Date(), 
"getDate" : function(d){ 
d = d || self.dateInfo["now"]; 
return d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate(); 
}, 
"getTime" : function(d){ 
d = d || self.dateInfo["now"]; 
return d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); 
}, 
"getSelectTime" : function(d){ 
d = d || self.dateInfo["now"]; 
return d.getFullYear() + "-" + (d.getMonth()+1) + "-" + self.dateInfo.selectDay + 
" " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); 
}, 
"getDaysCount" : function(d){ 
d = d || self.dateInfo["now"]; 
return (new Date(d.getFullYear(),d.getMonth()+1,0)).getDate(); 
}, 
"weekOfFirstDay" : function(d){ 
d = d || self.dateInfo["now"]; 
return (new Date(d.getFullYear(),d.getMonth(),1)).getDay(); 
} 
}; 
self.dateInfo.selectDay = self.dateInfo["now"].getDate(); 
this.init(); 
}; 
Calendar.prototype = { 
init : function(){ 
this.initDom(); 
}, 
initDom : function(){ 
var self = this; 
//head 
var o = {"preYear":"<<","preMonth":"<","date":self.dateInfo["getDate"](),"nextMonth":">","nextYear":">>"}; 
for(var i in o){ 
var __ = o[i], tag = document.createElement("span"); 
tag.innerHTML = __.toString(); 
i!="date" && (tag.onclick = (function(fn){ 
return function(){fn.call(self);} 
})(self[i]) 
); 
i=="date" && (tag.className = "dateShow",self.datePlace = tag); 
self.head.appendChild(tag); 
} 
self.head.className = "cal-head"; 
//body 
self.buildBody(); 
self.body.className = "cal-body"; 
//foot 
self.timePlace = document.createElement("span"); 
var dInfo = self.dateInfo; 
var Valid = function(num,max){ 
num = /^\d+$/.test(num) ? num : -1; 
if(num<0 || num>max){ 
return false; 
} 
return true; 
}; 
var times = {"hour":["getHours","setHours"],"minutes":["getMinutes","setMinutes"],"seconds":["getSeconds","setSeconds"]}; 
for(var i in times){ 
var t = document.createElement("span"); 
var tInput = document.createElement("input"); 
t.innerHTML = tInput.value = dInfo["now"][times[i][0]](); 
tInput.style.display = "none"; 
t.onclick = (function(tIpt){ 
return function(){ 
this.style.display = "none"; 
tIpt.style.display = "inline-block"; 
tIpt.select(); 
} 
})(tInput); 
tInput.onblur = (function(t,setFn){ 
return function(){ 
this.style.display = "none"; 
if(Valid(this.value,(setFn=="setHours"?23:59))){ 
t.innerHTML = this.value; 
dInfo["now"][setFn](parseInt(this.value)); 
} 
t.style.display = "inline-block"; 
} 
})(t,times[i][1]); 
self.timePlace.appendChild(t); 
self.timePlace.appendChild(tInput); 
if(i!="seconds"){ 
var sp = document.createElement("span"); 
sp.innerHTML = ":"; 
self.timePlace.appendChild(sp); 
} 
} 
self.timePlace.className = "timeShow"; 
var okBtn = document.createElement("span"); 
okBtn.innerHTML = "Ok"; 
okBtn.className = "okBtn"; 
okBtn.onclick = function(){ 
alert(dInfo["getSelectTime"]()); 
}; 
self.foot.appendChild(self.timePlace); 
self.foot.appendChild(okBtn); 
self.foot.className = "cal-foot"; 
//relation 
this.box.appendChild(self.head); 
this.box.appendChild(self.body); 
this.box.appendChild(self.foot); 
this.box.className = "cal-box"; 
document.body.appendChild(this.box); 
}, 
buildBody : function(){ 
var self = this,dInfo = self.dateInfo, week = dInfo["weekOfFirstDay"](),days = dInfo["getDaysCount"](),day = dInfo["now"].getDate(); 
var cDay = function(inner,ev){ 
var tag = document.createElement("span"); 
tag.innerHTML = inner; 
ev && (tag.onclick = function(){ 
self.selectDay.className = self.selectDay.className.replace(" selectDay",""); 
self.selectDay = this; 
self.selectDay.className = self.selectDay.className + " selectDay"; 
self.dateInfo.selectDay = inner; 
}); 
return tag; 
}; 
var domPgm = document.createDocumentFragment(); 
//weedInfo 
var weeks = ["天","一","二","三","四","五","六"]; 
for(var i=0;i<weeks.length;i++){ 
domPgm.appendChild(cDay(weeks[i])); 
} 
//上个月的补白 
for(var i=0;i<week;i++){ 
domPgm.appendChild(cDay("")); 
} 
//本月信息 
parseInt(self.dateInfo.selectDay) > days && (self.dateInfo.selectDay = days); 
for(var i=1;i<=days;i++){ 
var tag = cDay(i,true); 
self.dateInfo.selectDay == i && (self.selectDay = tag,tag.className=" selectDay"); 
i===day && (tag.className=tag.className+" nowDay"); 
domPgm.appendChild(tag); 
} 
//下个月的补白.... 
self.body.innerHTML = ""; 
self.body.appendChild(domPgm); 
}, 
dateShow : function(){ 
this.datePlace.innerHTML = this.dateInfo["getDate"](); 
}, 
updateUI : function(){ 
this.dateShow(); 
this.buildBody(); 
}, 
preYear : function(){ 
this.dateInfo["now"].setYear(this.dateInfo["now"].getFullYear()-1); 
this.updateUI(); 
}, 
preMonth : function(){ 
var dInfo = this.dateInfo,m = dInfo["now"].getMonth(); 
--m; 
m<0 && (m = 11,dInfo["now"].setYear(this.dateInfo["now"].getFullYear()-1)); 
dInfo["now"].setMonth(m); 
this.updateUI(); 
}, 
nextMonth : function(){ 
var dInfo = this.dateInfo,m = dInfo["now"].getMonth(); 
++m; 
m>11 && (m = 0,dInfo["now"].setYear(this.dateInfo["now"].getFullYear()+1)); 
dInfo["now"].setMonth(m); 
this.updateUI(); 
}, 
nextYear : function(){ 
this.dateInfo["now"].setYear(this.dateInfo["now"].getFullYear()+1); 
this.updateUI(); 
} 
};

css代码:
.cal-box{ 
width:210px; 
font-family:"Courier New", Courier, monospace; 
font-size:14px; 
} 
.cal-box span{ 
display:inline-block; 
text-align:center; 
} .cal-head{ 
background-color:#FC3; 
} 
.cal-head span{ 
width:20px; 
font-weight:bold; 
color:#69C; 
text-decoration:underline; 
cursor:pointer; 
} 
.cal-head .dateShow{ 
width:130px; 
text-decoration:none; 
} 
.cal-foot{ 
background-color:#FC3; 
} 
.cal-foot .timeShow{ 
width:160px; 
text-align:left; 
} 
.cal-foot .timeShow input{ 
width:24px; 
height:12px; 
font-size:12px; 
} 
.cal-foot .okBtn{ 
width:50px; 
background-color:#CCC; 
cursor:pointer; 
} 
.cal-body{ 
background-color:#9CF; 
} 
.cal-body span{ 
display:inline-block; 
width:30px; 
text-align:center; 
cursor:pointer; 
} 
.cal-body .nowDay{ 
background-color:#F00; 
} 
.cal-body .selectDay{ 
text-decoration:underline; 
}
Javascript 相关文章推荐
JQuery中each()的使用方法说明
Aug 19 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 #Javascript
网页中CDATA标记的说明
Sep 12 #Javascript
JavaScript小技巧 2.5 则
Sep 12 #Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 #Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 #Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 #Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 #Javascript
You might like
用PHP生成自己的LOG文件
2006/10/09 PHP
风格模板初级不完全修改教程
2006/10/09 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
python简单获取数组元素个数的方法
2015/07/13 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
销售冠军获奖感言
2014/02/03 职场文书
法律系毕业生求职信
2014/05/28 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
关于感谢信的范文
2015/01/23 职场文书