js 日历功能对象

最新推荐文章于 2023-04-07 17:43:40 发布

weixin_30319097

最新推荐文章于 2023-04-07 17:43:40 发布

阅读量95

点赞数

原文链接：http://www.cnblogs.com/wangzf-No1/archive/2012/01/11/calendar_wangzf.html

版权

问题产生需求：做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.οnclick=function(){ calendar.init();calendarChange()}//返回今天功能实现
	
	var calendar_dnY=document.getElementById("calendar_dnY")
	calendar_dnY.οnclick=function(){ calendar.dnY();calendarChange()}//下一年 功能实现
	
	var calendar_dnM=document.getElementById("calendar_dnM")
	calendar_dnM.οnclick=function(){ calendar.dnM();calendarChange()}//下一月 功能实现
	
	var calendar_upY=document.getElementById("calendar_upY")
	calendar_upY.οnclick=function(){ calendar.upY();calendarChange()}//上一年 功能实现
	
	var calendar_upM=document.getElementById("calendar_upM")
	calendar_upM.οnclick=function(){ calendar.upM();calendarChange()}//上一月 功能实现
	
	var calendar_day=document.getElementById("calendar_body").getElementsByTagName("td");
	for(var i in calendar_day){calendar_day[i].οnclick=function(){var N=Number(this.innerText);if(N){calendar.day(N);calendarChange()}}}//当天日期 功能实现

	}
	
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/wangzf-No1/archive/2012/01/11/calendar_wangzf.html