首页
所有分类
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 ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
JavaScript中的一些实用小技巧总结
Apr 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
微信小程序(9) bufio(1) pdfkit(1) 可视化动图(1) vue-esign(1) Pillow(2) matplotlib(7) ipyvizzu(1) WeUI(1) 蒙特卡罗(1)
You might like
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
php异常处理捕获错误整理
2019/09/23 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
python中的多重继承实例讲解
2014/09/28 Python
python的keyword模块用法实例分析
2015/06/30 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
Python爬取网页信息的示例
2020/09/24 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
超30万乐谱下载：Musicnotes.com
2016/09/24 全球购物
意大利珠宝店：Luxury Zone
2019/01/05 全球购物
JSF面试题：Jsf中的核心类用那些?有什么作用？LiftCycle六大生命周期是什么？
2014/07/17 面试题
C/C++有关内存的思考题
2015/12/04 面试题
师范应届生语文教师求职信
2013/10/29 职场文书
员工年终演讲稿
2014/01/03 职场文书
物流仓管员工作职责
2014/01/06 职场文书
质量负责人任命书
2014/06/06 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL