js 日历 功能对象
2012-01-11 17:20
288 查看
问题产生需求:做OA时弄到 备忘这个功能,想以日历的形式展现。
需求产生问题:本来想在网上找个js代码,可是发现要么太复杂,要么不好控制,要么兼容性不好......
问题分析: 发现不是优秀的就是最好的.... 适合自己的就是最好的。
问题解决: 决定自己写一个日历 功能。
代码呈现:
日历主程序
代码应用讲解:
这个日历对象实现的是日历的核心功能功能,
具体是日历放在哪里,
哪个事件触发哪个函数这个我没有写,
要是那样的话就失去我写这个日历的原有目的了。
怎么大家都没反应,我弄个例子,大家看下吧
需求产生问题:本来想在网上找个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日历功能对象
- js日历功能对象
- JS制作简单的日历控件【JS Date对象操作实例演示】
- 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
- 终于找到了在asp.net使用popcalendar.js 日历时候提示出现"缺少对象“的解决办法。
- 分享2个功能的js代码(去掉数组里重复的项、数组或对象深拷贝)
- 12 Three.js官方文档介绍的相关对象功能列表
- JS基于对象的特性实现去除数组中重复项功能详解
- JS简单实现移动端日历功能示例
- js对象如何实现数组索引功能并且自定义自己的方法 (4种方法)
- js面向对象(只关注对象提供的功能,而不需要关系其细节)
- JS 自定义对象实现Java中的Map对象功能
- JS 自定义对象实现Java中的Map对象功能
- js公用功能对象
- 扩展JS Date对象时间格式化功能的小例子
- 第199天:js---扩充内置对象功能总结
- JS实现选定指定HTML元素对象中指定文本内容功能示例
- JS PC端时间日历插件 功能齐全 无依赖
- JS日历,(万年历)功能和界面都挺好的
- js编程思路--把相同功能的代码,配置放到一个对象里