js 日历 功能对象
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 342
问题产生需求:做OA时弄到备忘这个功能,想以日历的形式展现。需求产生问题:本来想在网上找个js代码,可是发现要么太复杂,要么不好控制,要么兼容性不好......问题分析:发现不是优秀的就是最好的..

问题产生需求:做OA时弄到 备忘这个功能,想以日历的形式展现。

需求产生问题:本来想在网上找个js代码,可是发现要么太复杂,要么不好控制,要么兼容性不好......

问题分析: 发现不是优秀的就是最好的....  适合自己的就是最好的。

问题解决: 决定自己写一个日历 功能。

代码呈现:

日历主程序
 1 var calendar={
2 STR:function(){with(this.data)return ""+Y+"年,"+M+"月,"+D+"号,星期"+WN[W];},
3 V:function(o,spli,sx){with(this)return o[sx]=""+data.Y+spli+data.M+spli+data.D},
4 T:function(){with(this)return data.TABLE},
5 dnY:function(){with(this){calendarChange(data.Y+1,data.M-1,data.D)}},
6 dnM:function(){with(this){calendarChange(data.Y,data.M,data.D)}},
7 upY:function(){with(this){calendarChange(data.Y-1,data.M-1,data.D)}},
8 upM:function(){with(this){calendarChange(data.Y,data.M-2,data.D)}},
9 day:function(o){with(this){data.D=o;calendarChange(data.Y,data.M-1,data.D)}},
10 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},
11
12 creatTable:function(){with(this){
13 var table="<table height=100% width=100%><tr>"
14 for(var i=0;i<data.ROWLEN;i++){var t=data.WN[i]||"&nbsp;";table+="<th>"+t+"</th>";}
15 for(var i in data.ARR){var showText=data.ARR[i]||"&nbsp;",br=i%data.ROWLEN,title,css;
16 if(!br){table+="</tr><tr>"};
17 data.ARR[i]?title=data.Y+"-"+data.M+"-"+showText:title="";
18 String(data.TADAY.getDate())==String(data.ARR[i])?
19 (data.YMD.getFullYear()==data.TADAY.getFullYear()&&data.YMD.getMonth()==data.TADAY.getMonth()&&data.YMD.getDate()==data.TADAY.getDate())?
20 css=data.TADAY_C+" "+data.YMD_C:css=data.YMD_C:css="";
21 table+="<td title='"+title+"' class="+css+">"+showText+"</td>";
22 }table+="</tr></table>"
23 data.TABLE=table;return table;
24 }},
25 calendarStarArr:function(userY,userM,userD){with(this){
26 var Arr=[];
27 var now = new Date(userY,userM,userD);
28 var LastDay = now.getLastDay();
29 var FirstDayofWeek = now.FirstDayofWeek();
30 data.YMD=now;data.Y=now.getFullYear();
31 data.M=now.getMonth()+1;data.D=now.getDate();data.W=now.getDay();
32 while(Arr.length!=FirstDayofWeek){Arr.push(false)}
33 for(var i=0;i<LastDay;i++){Arr.push(i+1)}
34 while(Arr.length%data.ROWLEN!=0){Arr.push(false)}
35 data.ARR=Arr;return Arr;
36 }},
37
38 calendarChange:function(userY,userM,userD){with(this){
39 calendarStarArr(userY,userM,userD);creatTable()
40 }},
41 calendarStar:function(userY,userM,userD){with(this){
42 data.MN = ["零","一","二","三","四","五","六","七","八","九","十","十一","十二"];
43 data.WN = ["日","一","二","三","四","五","六"];
44 calendarChange(userY,userM,userD);
45 }},
46 init:function(){with(this){
47 Date.prototype.getLastDay=function(){return(new Date(this.getFullYear(),this.getMonth()+1,0).getDate())}
48 Date.prototype.FirstDayofWeek=function(){return(new Date(this.getFullYear(),this.getMonth(),1).getDay())}
49 calendarStar(new Date().getFullYear(),new Date().getMonth(),new Date().getDate())
50 }}
51 }


代码应用讲解:

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>  

 

 

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2