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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
javascript 验证日期的函数
Mar 18 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
Vue组件基础用法详解
Feb 05 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
js常用DOM方法详解
2017/02/04 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
Python中zip()函数用法实例教程
2014/07/31 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python实现汉诺塔算法
2021/03/01 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Django 重写用户模型的实现
2019/07/29 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python程序慢的重要原因
2020/09/04 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
教师的实习自我鉴定
2013/12/17 职场文书
民事赔偿协议书
2014/11/02 职场文书
事业单位年度考核评语
2014/12/31 职场文书
学习心理学心得体会
2016/01/22 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
mysql分表之后如何平滑上线详解
2021/11/01 MySQL