首页
所有分类
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的表格隔行换色，移动换色，点击换色插件
Dec 22 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
js抽奖转盘实现方法分析
May 16 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
GoFrame(3) 内置函数(1) Tablespace(1) SQLite3(1) 短信验证码(1) harbor(1) procedure(1) commit(1) 分布式锁(3) pytz(1)
You might like
解析coreseek for sphinx的使用
2013/06/21 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
ionic2自定义cordova插件开发以及使用（Android）
2017/06/19 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
pyside写ui界面入门示例
2014/01/22 Python
Sublime开发python程序的示例代码
2018/01/24 Python
用Eclipse写python程序
2018/02/10 Python
python3安装pip3（install pip3 for python 3.x）
2018/04/03 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python通过zabbix api获取主机
2018/09/17 Python
详解Python用户登录接口的方法
2019/04/17 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
python 制作简单的音乐播放器
2020/11/25 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
英国在线电子和小工具商店：TecoBuy
2018/10/06 全球购物
Mankind美国/加拿大：英国领先的男士美容护发用品公司
2018/12/05 全球购物
英国在线照明超市：Castlegate Lights
2019/10/30 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
毕业生的自我鉴定
2013/10/29 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
新郎结婚保证书
2015/02/26 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle