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 相关文章推荐
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 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多文件上传功能实现原理及代码
2013/04/18 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP7 标准库修改
2021/03/09 PHP
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
python中if及if-else如何使用
2020/06/02 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
任命书格式
2014/06/05 职场文书
保密工作承诺书
2014/08/29 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
医院领导班子整改方案
2014/10/01 职场文书
学校食品安全责任书
2015/01/29 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
大队委员竞选稿
2015/11/20 职场文书
技术转让协议书
2016/03/19 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Python安装使用Scrapy框架
2022/04/12 Python