js日历功能对象_javascript技巧-js教程-PHP中文網

需求产生问题：本来想在网上找个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="" 
for(var i=0;i"+t+"";} 
for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i%data.ROWLEN,title,css; 
if(!br){table+=""}; 
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+=""; 
}table+="

"+showText+"
" 
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;iwhile(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 需要传一个数值型参数) 

这个日历对象实现的是日历的核心功能功能，
具体是日历放在哪里，
哪个事件触发哪个函数这个我没有写，
要是那样的话就失去我写这个日历的原有目的了。
怎么大家都没反应，我弄个例子，大家看下吧

复制代码代码如下:

js日历效果-wangzf

<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+"";} for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i%data.ROWLEN,title,css=""; if(!br){table+="<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+""; }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>