首页
所有分类
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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 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
求职信(1029) 自我鉴定(671) 推荐信(292) 自荐信(981) SOA面试题(9) 自我评价(886) 思想汇报(404) 职业生涯规划书(234) 岗位职责(1324) 创业计划书(312)
You might like
收集的php编写大型网站问题集
2007/03/06 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
python获取指定日期范围内的每一天，每个月，每季度的方法
2019/08/08 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
python异常处理try except过程解析
2020/02/03 Python
J2EE中的容器都包括哪些
2013/08/21 面试题
英语教学随笔感言
2014/02/20 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
廉洁教育学习材料
2014/05/19 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
运动会广播稿200字（10篇）
2014/10/12 职场文书
维稳承诺书
2015/01/20 职场文书
护士辞职信怎么写
2015/02/27 职场文书