首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js日历功能对象

Posted in Javascript onJanuary 12, 2012

需求产生问题：本来想在网上找个js代码，可是发现要么太复杂，要么不好控制，要么兼容性不好......
问题分析： 发现不是优秀的就是最好的.... 适合自己的就是最好的。
问题解决： 决定自己写一个日历 功能。
代码呈现：
日历主程序 

var calendar={ 
STR:function(){with(this.data)return ""+Y+"年，"+M+"月，"+D+"号，星期"+WN[W];}, 
V:function(o,spli,sx){with(this)return o[sx]=""+data.Y+spli+data.M+spli+data.D}, 
T:function(){with(this)return data.TABLE}, 
dnY:function(){with(this){calendarChange(data.Y+1,data.M-1,data.D)}}, 
dnM:function(){with(this){calendarChange(data.Y,data.M,data.D)}}, 
upY:function(){with(this){calendarChange(data.Y-1,data.M-1,data.D)}}, 
upM:function(){with(this){calendarChange(data.Y,data.M-2,data.D)}}, 
day:function(o){with(this){data.D=o;calendarChange(data.Y,data.M-1,data.D)}}, 
data:{Y:null,M:null,D:null,W:null,H:null,U:null,YMD:null,YMD_C:"hot",ARR:null,TABLE:null,MN:null,WN:null,SELECT:null,TADAY:new Date(),TADAY_C:"taday",ROWLEN:7,VALUE:null}, 
creatTable:function(){with(this){ 
var table="<table height=100% width=100%><tr>" 
for(var i=0;i<data.ROWLEN;i++){var t=data.WN[i]||" ";table+="<th>"+t+"</th>";} 
for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i%data.ROWLEN,title,css; 
if(!br){table+="</tr><tr>"}; 
data.ARR[i]?title=data.Y+"-"+data.M+"-"+showText:title=""; 
String(data.TADAY.getDate())==String(data.ARR[i])? 
(data.YMD.getFullYear()==data.TADAY.getFullYear()&&data.YMD.getMonth()==data.TADAY.getMonth()&&data.YMD.getDate()==data.TADAY.getDate())? 
css=data.TADAY_C+" "+data.YMD_C:css=data.YMD_C:css=""; 
table+="<td title='"+title+"' class="+css+">"+showText+"</td>"; 
}table+="</tr></table>" 
data.TABLE=table;return table; 
}}, 
calendarStarArr:function(userY,userM,userD){with(this){ 
var Arr=[]; 
var now = new Date(userY,userM,userD); 
var LastDay = now.getLastDay(); 
var FirstDayofWeek = now.FirstDayofWeek(); 
data.YMD=now;data.Y=now.getFullYear(); 
data.M=now.getMonth()+1;data.D=now.getDate();data.W=now.getDay(); 
while(Arr.length!=FirstDayofWeek){Arr.push(false)} 
for(var i=0;i<LastDay;i++){Arr.push(i+1)} 
while(Arr.length%data.ROWLEN!=0){Arr.push(false)} 
data.ARR=Arr;return Arr; 
}}, 
calendarChange:function(userY,userM,userD){with(this){ 
calendarStarArr(userY,userM,userD);creatTable() 
}}, 
calendarStar:function(userY,userM,userD){with(this){ 
data.MN = ["零","一","二","三","四","五","六","七","八","九","十","十一","十二"]; 
data.WN = ["日","一","二","三","四","五","六"]; 
calendarChange(userY,userM,userD); 
}}, 
init:function(){with(this){ 
Date.prototype.getLastDay=function(){return(new Date(this.getFullYear(),this.getMonth()+1,0).getDate())} 
Date.prototype.FirstDayofWeek=function(){return(new Date(this.getFullYear(),this.getMonth(),1).getDay())} 
calendarStar(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()) 
}} 
}

代码应用讲解： 
var aa=new calendar()//创建一个新日历 
aa.init()//日历初始

obj.innerHTML=aa.STR()//显示日期字符串 
obj.innerHTML=aa.T()//显示表格 
aa.dnY()//下一年 
aa.upY()//上一年 
aa.dnM()//下一月 
aa.upM()//上一月 
aa.day(Number)//改变日历显示的几号(Number 需要传一个数值型参数)

这个日历对象实现的是日历的核心功能功能，
具体是日历放在哪里，
哪个事件触发哪个函数这个我没有写，
要是那样的话就失去我写这个日历的原有目的了。
怎么大家都没反应，我弄个例子，大家看下吧 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js日历效果-wangzf</title> 
</head> 
<style> 
html,body{height:100%;width:100%;} 
*{margin:0;padding:0;} 
.calendarBox{width:100%;} 
#calendar_control{background:#a3a3b4;} 
#calendar_control input{min-width:inherit;} 
#calendarBox{width:100%;height:100%;} 
#calendar_str{cursor:pointer;text-align:center;font-weight:lighter;} 
#calendar_body td{background:#f0f0f0;cursor:pointer;} 
#calendar_body td.taday{background:#0CF;} 
#calendar_body td.hot{background:#FF6;} 
#calendar_body th{background:#3f526f;color:#fff;} 
#calendar_body td,#calendar_body th{text-align:center;} 
</style> 
<script> 
var calendar={ 
STR:function(){with(this.data)return ""+Y+"年，"+M+"月，"+D+"号，星期"+WN[W];}, 
V:function(spli){with(this)return ""+data.Y+spli+data.M+spli+data.D}, 
T:function(){with(this)return data.TABLE}, 
dnY:function(){with(this){calendarChange(data.Y+1,data.M-1,data.D)}}, 
dnM:function(){with(this){calendarChange(data.Y,data.M,data.D)}}, 
upY:function(){with(this){calendarChange(data.Y-1,data.M-1,data.D)}}, 
upM:function(){with(this){calendarChange(data.Y,data.M-2,data.D)}}, 
day:function(o){with(this){data.D=o;calendarChange(data.Y,data.M-1,data.D)}}, 
data:{Y:null,M:null,D:null,W:null,H:null,U:null,YMD:null,YMD_C:"hot",ARR:null,TABLE:null,MN:null,WN:null,SELECT:null,TADAY:new Date(),TADAY_C:"taday",ROWLEN:7,VALUE:null}, 
creatTable:function(){with(this){ 
var table="<table height=100% width=100%><tr>" 
for(var i=0;i<data.ROWLEN;i++){var t=data.WN[i]||" ";table+="<th>"+t+"</th>";} 
for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i%data.ROWLEN,title,css=""; 
if(!br){table+="</tr><tr>"}; 
data.ARR[i]?title=data.Y+"-"+data.M+"-"+showText:title=""; 
if(String(data.D)==String(data.ARR[i])){css+=" "+data.YMD_C;} 
if(data.YMD.getFullYear()==data.TADAY.getFullYear()&&data.YMD.getMonth()==data.TADAY.getMonth()&&String(data.TADAY.getDate())==String(data.ARR[i])){css=" "+data.TADAY_C} 
table+="<td title='"+title+"' class="+css+">"+showText+"</td>"; 
}table+="</tr></table>" 
data.TABLE=table;return table; 
}}, 
calendarStarArr:function(userY,userM,userD){with(this){ 
var Arr=[]; 
var now = new Date(userY,userM,userD); 
var LastDay = now.getLastDay(); 
var FirstDayofWeek = now.FirstDayofWeek(); 
data.YMD=now;data.Y=now.getFullYear(); 
data.M=now.getMonth()+1;data.D=now.getDate();data.W=now.getDay(); 
while(Arr.length!=FirstDayofWeek){Arr.push(false)} 
for(var i=0;i<LastDay;i++){Arr.push(i+1)} 
while(Arr.length%data.ROWLEN!=0){Arr.push(false)} 
data.ARR=Arr;return Arr; 
}}, 
calendarChange:function(userY,userM,userD){with(this){ 
calendarStarArr(userY,userM,userD);creatTable() 
}}, 
calendarStar:function(userY,userM,userD){with(this){ 
data.MN = ["零","一","二","三","四","五","六","七","八","九","十","十一","十二"]; 
data.WN = ["日","一","二","三","四","五","六"]; 
calendarChange(userY,userM,userD); 
}}, 
init:function(){with(this){ 
Date.prototype.getLastDay=function(){return(new Date(this.getFullYear(),this.getMonth()+1,0).getDate())} 
Date.prototype.FirstDayofWeek=function(){return(new Date(this.getFullYear(),this.getMonth(),1).getDay())} 
calendarStar(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()) 
}} 
} 
</script> 
<body id="body"> 
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr height="10%"> 
<td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" id="calendar_control"> 
<tr> 
<th width="20%" align="left" scope="col"> 
<input type="button" title="上一年" value="<<" id="calendar_upY" /> 
<input type="button" title="上一月" value="<" id="calendar_upM" /></th> 
<th width="56%" id="calendar_str" scope="col" title="点击返回今天."></th> 
<th width="24%" align="right" scope="col"> 
<input type="button" title="下一年" value=">>" id="calendar_dnY" /> 
<input type="button" title="下一月" value=">" id="calendar_dnM" /></th> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td height="90%" id="calendar_body"></td> 
</tr> 
</table> 
<script> 
calendar.init() 
function calendarChange(){ 
var calendar_body=document.getElementById("calendar_body") 
calendar_body.innerHTML=calendar.T()//显示表格 
var calendar_str=document.getElementById("calendar_str") 
calendar_str.innerHTML=calendar.STR()//显示日期字符串 
calendarControl()//调用日历控制 
} 
calendarChange()//日历更新 
function calendarControl(){ 
var calendar_str=document.getElementById("calendar_str") 
calendar_str.onclick=function(){ calendar.init();calendarChange()}//返回今天功能实现 
var calendar_dnY=document.getElementById("calendar_dnY") 
calendar_dnY.onclick=function(){ calendar.dnY();calendarChange()}//下一年 功能实现 
var calendar_dnM=document.getElementById("calendar_dnM") 
calendar_dnM.onclick=function(){ calendar.dnM();calendarChange()}//下一月 功能实现 
var calendar_upY=document.getElementById("calendar_upY") 
calendar_upY.onclick=function(){ calendar.upY();calendarChange()}//上一年 功能实现 
var calendar_upM=document.getElementById("calendar_upM") 
calendar_upM.onclick=function(){ calendar.upM();calendarChange()}//上一月 功能实现 
var calendar_day=document.getElementById("calendar_body").getElementsByTagName("td"); 
for(var i in calendar_day){calendar_day[i].onclick=function(){var N=Number(this.innerText);if(N){calendar.day(N);calendarChange()}}}//当天日期 功能实现 
} 
</script> 
</body> 
</html>

js日历功能对象

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
FF（火狐）浏览器无法执行window.close()解决方案
Nov 13 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
用JS实现选项卡
Mar 23 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
关于 文本框默认值 的操作js代码
Jan 12 #Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 #Javascript
JS读取cookies信息(记录用户名)
Jan 10 #Javascript
判断对象是否Window的实现代码
Jan 10 #Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 #Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 #Javascript
jQuery 阴影插件代码分享
Jan 09 #Javascript
感言(394) 接收函(23) 广播稿(323) 计划书(118) 事迹材料(636) 证明书(326) 辞职信(98) 答谢词(97) 教学反思(909) 方案(1080)
You might like
去除php注释和去除空格函数分享
2014/03/13 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
详解Grunt插件之LiveReload实现页面自动刷新（两种方案）
2015/07/31 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP中的使用curl发送请求（GET请求和POST请求）
2017/02/08 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
Prototype Class对象学习
2009/07/19 Javascript
使用JavaScript库还是自己写代码？
2010/01/28 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
javascript简写常用的12个技巧（可以大大减少你的js代码量）
2020/03/28 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python制作词云图代码实例
2019/09/09 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Cotton On南非：澳洲时尚平价品牌
2018/06/28 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
讲座主持词
2014/03/20 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
公司车辆管理制度
2015/08/04 职场文书