bbsvs

js实现日历功能的方法

作者:bbsvs 时间:2017-08-30

这篇文章主要是详细介绍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 需要传一个数值型参数)


TAG:
日历   制作   控件