js calendar function object_javascript skills

Problems caused by demand: I originally wanted to find a js code on the Internet, but found that it was either too complicated, difficult to control, or had poor compatibility...
Problem analysis: I found that it is either excellent or the best. ... What suits you is the best.
Problem solution: Decided to write a calendar function by myself.
Code presentation:
Calendar main program

Copy code The code is as follows:

var calendar={
STR:function(){with(this.data)return "" Y "year," M "month," D "number, week" 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";}
for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i�ta.ROWLEN,title,css;
if(!br){table ="< ;/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 ="";
}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�ta.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 = ["zero","one","two ","three","four","five","six","seven","eight","nine","ten","eleven","twelve"];
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())
}}
}

Code application explanation:

Copy code The code is as follows:

var aa=new calendar()//Create a new calendar
aa .init()//Calendar initialization

Copy code The code is as follows:

obj.innerHTML=aa.STR()//Display date string
obj.innerHTML=aa.T()//Display table
aa.dnY()//Next year
aa .upY()//Previous year
aa.dnM()//Next month
aa.upM()//Previous month
aa.day(Number)//Change the calendar display What number (Number needs to pass a numeric parameter)

This calendar object implements the core functions of the calendar,
specifically where the calendar is placed,
which event triggers which function I didn’t write this.
If that were the case, I would lose the original purpose of writing this calendar.
Why didn’t anyone respond? Let me give you an example. Let’s take a look.

Copy the code The code is as follows:

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