js日历功能对象_javascript技巧

需求产生问题：本来想在网上找个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 需要传一个数值型参数)

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

复制代码 代码如下:

<script> <BR>var calendar={ <BR>STR:function(){with(this.data)return ""+Y+"年，"+M+"月，"+D+"号，星期"+WN[W];}, <BR>V:function(spli){with(this)return ""+data.Y+spli+data.M+spli+data.D}, <BR>T:function(){with(this)return data.TABLE}, <BR>dnY:function(){with(this){calendarChange(data.Y+1,data.M-1,data.D)}}, <BR>dnM:function(){with(this){calendarChange(data.Y,data.M,data.D)}}, <BR>upY:function(){with(this){calendarChange(data.Y-1,data.M-1,data.D)}}, <BR>upM:function(){with(this){calendarChange(data.Y,data.M-2,data.D)}}, <BR>day:function(o){with(this){data.D=o;calendarChange(data.Y,data.M-1,data.D)}}, <BR>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}, <BR>creatTable:function(){with(this){ <BR>var table="<table height=100% width=100%><tr>" <BR>for(var i=0;i<data.ROWLEN;i++){var t=data.WN[i]||" ";table+="<th>"+t+"";} <BR>for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i%data.ROWLEN,title,css=""; <BR>if(!br){table+="<tr>"}; <BR>data.ARR[i]?title=data.Y+"-"+data.M+"-"+showText:title=""; <BR>if(String(data.D)==String(data.ARR[i])){css+=" "+data.YMD_C;} <BR>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} <BR>table+="<td title='"+title+"' class="+css+">"+showText+""; <BR>}table+="" <BR>data.TABLE=table;return table; <BR>}}, <BR>calendarStarArr:function(userY,userM,userD){with(this){ <BR>var Arr=[]; <BR>var now = new Date(userY,userM,userD); <BR>var LastDay = now.getLastDay(); <BR>var FirstDayofWeek = now.FirstDayofWeek(); <BR>data.YMD=now;data.Y=now.getFullYear(); <BR>data.M=now.getMonth()+1;data.D=now.getDate();data.W=now.getDay(); <BR>while(Arr.length!=FirstDayofWeek){Arr.push(false)} <BR>for(var i=0;i<LastDay;i++){Arr.push(i+1)} <BR>while(Arr.length%data.ROWLEN!=0){Arr.push(false)} <BR>data.ARR=Arr;return Arr; <BR>}}, <BR>calendarChange:function(userY,userM,userD){with(this){ <BR>calendarStarArr(userY,userM,userD);creatTable() <BR>}}, <BR>calendarStar:function(userY,userM,userD){with(this){ <BR>data.MN = ["零","一","二","三","四","五","六","七","八","九","十","十一","十二"]; <BR>data.WN = ["日","一","二","三","四","五","六"]; <BR>calendarChange(userY,userM,userD); <BR>}}, <BR>init:function(){with(this){ <BR>Date.prototype.getLastDay=function(){return(new Date(this.getFullYear(),this.getMonth()+1,0).getDate())} <BR>Date.prototype.FirstDayofWeek=function(){return(new Date(this.getFullYear(),this.getMonth(),1).getDay())} <BR>calendarStar(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()) <BR>}} <BR>} <BR></script>

<script> <BR>calendar.init() <BR>function calendarChange(){ <BR>var calendar_body=document.getElementById("calendar_body") <BR>calendar_body.innerHTML=calendar.T()//显示表格 <BR>var calendar_str=document.getElementById("calendar_str") <BR>calendar_str.innerHTML=calendar.STR()//显示日期字符串 <BR>calendarControl()//调用日历控制 <BR>} <BR>calendarChange()//日历更新 <BR>function calendarControl(){ <BR>var calendar_str=document.getElementById("calendar_str") <BR>calendar_str.onclick=function(){ calendar.init();calendarChange()}//返回今天功能实现 <BR>var calendar_dnY=document.getElementById("calendar_dnY") <BR>calendar_dnY.onclick=function(){ calendar.dnY();calendarChange()}//下一年 功能实现 <BR>var calendar_dnM=document.getElementById("calendar_dnM") <BR>calendar_dnM.onclick=function(){ calendar.dnM();calendarChange()}//下一月 功能实现 <BR>var calendar_upY=document.getElementById("calendar_upY") <BR>calendar_upY.onclick=function(){ calendar.upY();calendarChange()}//上一年 功能实现 <BR>var calendar_upM=document.getElementById("calendar_upM") <BR>calendar_upM.onclick=function(){ calendar.upM();calendarChange()}//上一月 功能实现 <BR>var calendar_day=document.getElementById("calendar_body").getElementsByTagName("td"); <BR>for(var i in calendar_day){calendar_day[i].onclick=function(){var N=Number(this.innerText);if(N){calendar.day(N);calendarChange()}}}//当天日期 功能实现 <BR>} <BR></script>