javascript-Simple calendar implementation and introduction to Date object syntax (with pictures)_javascript skills

Knowledge points:

Mainly the use of Date objects. (The following introduction comes from the Internet)

The syntax for creating a Date object:
var myDate=new Date()
The Date object will automatically save the current date and time as its initial value.
There are the following 5 parameter forms:
new Date("month dd,yyyy hh:mm:ss");
new Date("month dd,yyyy");
new Date(yyyy ,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);

Note: The last form represents the parameter It is the number of milliseconds difference between the time to be created and January 1, 1970 GMT time.

The meaning of the parameter is as follows:

month: Indicates the name of the month in English, from January to December

mth: Indicates the month in integer, from ( January) to November (December)

dd: Indicates the day of the month, from 1 to 31

yyyy: Four-digit year

hh: Number of hours, from 0 (midnight) to 23 (11 p.m.)

mm: Number of minutes, an integer from 0 to 59

ss: Number of seconds, from 0 to 59 Integer

ms: milliseconds, an integer greater than or equal to 0

Methods of Date object:

getDate() Returns one month from Date object One of the days (1 ~ 31).
getDay() returns the day of the week (0 ~ 6) from the Date object.
getMonth() returns the month (0 ~ 11) from the Date object.
getFullYear() Returns the year as a four-digit number from a Date object.
getYear() Please use getFullYear() method instead.
getHours() returns the hours (0 ~ 23) of the Date object.
getMinutes() returns the minutes (0 ~ 59) of the Date object.
getSeconds() returns the seconds (0 ~ 59) of the Date object.
getMilliseconds() returns the milliseconds (0 ~ 999) of the Date object.
getTime() returns the number of milliseconds since January 1, 1970.
getTimezoneOffset() returns the difference in minutes between local time and Greenwich Mean Time (GMT).
getUTCDate() Returns the day of the month (1 ~ 31) from a Date object based on universal time.
getUTCDay() Returns the day of the week (0 ~ 6) from a Date object based on universal time.
getUTCMonth() returns the month (0 ~ 11) from a Date object based on universal time.
getUTCFulYear() Returns the four-digit year from a Date object based on universal time.
getUTCHours() returns the hour (0 ~ 23) of the Date object according to universal time.
getUTCMinutes() returns the minutes (0 ~ 59) of a Date object according to universal time.
getUTCSeconds() returns the seconds (0 ~ 59) of a Date object according to universal time.
getUTCMilliseconds() returns the milliseconds (0 ~ 999) of the Date object according to universal time.
parse() returns the number of milliseconds from midnight on January 1, 1970 to the specified date (string).
setDate() sets the day of the month (1 ~ 31) in the Date object.
setMonth() sets the month (0 ~ 11) in the Date object.
setFullYear() sets the year (four digits) in the Date object.
setYear() Please use setFullYear() method instead.
setHours() sets the hours (0 ~ 23) in the Date object.
setMinutes() sets the minutes (0 ~ 59) in the Date object.
setSeconds() sets the seconds (0 ~ 59) in the Date object.
setMilliseconds() sets the milliseconds (0 ~ 999) in the Date object.
setTime() sets a Date object in milliseconds.
setUTCDate() Sets the day of the month (1 ~ 31) in the Date object according to universal time.
setUTCMonth() Sets the month (0 ~ 11) in the Date object according to universal time.
setUTCFulYear() Sets the year (four digits) in the Date object according to universal time.
setUTCHours() Sets the hour (0 ~ 23) in the Date object according to universal time.
setUTCMinutes() Sets the minutes (0 ~ 59) in the Date object according to universal time.
setUTCSeconds() Sets the seconds (0 ~ 59) in the Date object according to universal time.
setUTCMilliseconds() Sets the milliseconds (0 ~ 999) in the Date object according to universal time.
toSource() returns the source code of the object.
toString() Converts Date object to string.
toTimeString() Converts the time part of the Date object to a string.
toDateString() Converts the date part of the Date object to a string.
toGMTString() Please use toUTCString() method instead. 1 3
toUTCString() Converts a Date object to a string according to universal time.
toLocaleString() Converts Date object to string according to local time format.
toLocaleTimeString() Converts the time part of the Date object into a string according to the local time format.
toLocaleDateString() Converts the date part of the Date object to a string according to the local time format.
UTC() Returns the number of milliseconds from January 1, 1997 to the specified date according to universal time.
valueOf() returns the original value of the Date object.
var objDate=new Date([arguments list]);

Simple calendar implementation:

Effect:

Code:

Copy code The code is as follows:

测试值：

上一月
下一月
上一年
下一年
今天

<script> <br><br>var Calendar=function(year,monthNum,parent){ <br>this.year=year; <br>this.parent=parent; <br>this.monthNum=monthNum-1; <br>function isLeapYear(y){ <br>return (y>0)&&!(y%4)&&((y0)||!(y@0)); <br>} <br>this.numDays=[31,isLeapYear(this.year)?29:28,31,30,31,30,31,31,30,31,30,31][this.monthNum]; <br>this.weekDays=["日","一","二","三","四","五","六"]; <br>this.nowDate=new Date; <br>this.init(); <br>} <br><br>Calendar.prototype={ <br>setMonthNum:function(monthNum){ <br>this.monthNum=monthNum-1; <br>}, <br>getMonthNum:function(){ <br>return this.monthNum 1; <br>}, <br>setYearNum:function(year){ <br>this.year=year; <br>}, <br>getYearNum:function(){ <br>return this.year; <br>}, <br>init:function(){ <br>this.setup(this.parent); <br>}, <br>reflesh:function(){ <br>this.setup(this.parent); <br>}, <br>setup:function(id){ <br>var date=this.nowDate; <br>var cal=document.getElementById(id); <br>cal.innerHTML=""; <br>var calDiv=document.createElement("div"); <br>var tab=document.createElement("table"); <br>cal.appendChild(calDiv); <br>calDiv.innerHTML=this.getSummary(); <br>cal.appendChild(tab); <br>calDiv.className="detail" <br>this.thead=document.createElement("thead"); <br>this.tbody=document.createElement("tbody"); <br>this.tfoot=document.createElement("tfoot"); <br>this.tr=document.createElement("tr"); <br>this.td=document.createElement("td"); <br><br>tab.appendChild(this.thead); <br>tab.appendChild(this.tbody); <br>this.setThead(); <br>this.create(); <br><br>}, <br>setThead:function(){ <br>var day=this.weekDays; <br>var tr=this.tr.cloneNode(true); <br>this.thead.appendChild(tr); <br>for(var i=0;i<7;i ){ <BR>var td=this.td.cloneNode(true); <BR>tr.appendChild(td); <BR>td.innerHTML=day[i]; <BR>} <BR>}, <BR>create:function(){ <BR>var day=new Date(this.year,this.monthNum,1); <BR>var tr=this.tr.cloneNode(true); <BR>var dayCount=this.numDays; <BR>var that=this; <br><br>that.tbody.appendChild(tr); <BR>for(var j=0;j<day.getDay();j ){ <BR>var td=that.td.cloneNode(true); <BR>tr.appendChild(td); <BR>td.innerHTML=" "; <BR>} <BR>for(var i=1;i<=dayCount;i ){ <BR>if((j i)%7-1==0){ <BR>tr=that.tr.cloneNode(true); <BR>that.tbody.appendChild(tr); <BR>} <BR>var td=that.td.cloneNode(true); <BR>var s=i; <BR>if(i==that.nowDate.getDate()){ <BR>s="<font color='red'>" i "</font>"; <br>} <br>td.innerHTML=s; <br>td.style.cursor="pointer"; <br>td.onclick=function(){ <br>document.getElementById("calendar_value").value=(that.getYearNum() "/" that.getMonthNum() "/" this.innerHTML) <br>} <br>td.onmouseover=function(){ <br>this.style.background="#fff"; <br>this.style.color="#033" <br>} <br>td.onmouseout=function(){ <br>this.style.background=""; <br>this.style.color="#fff" <br>} <br>tr.appendChild(td); <br>} <br>}, <br>getSummary:function(){ <br>var date=this.nowDate; <br>return this.year "年" (this.monthNum 1) "月" date.getDate() "日"; <br>} <br>} <br>var cal=new Calendar(2013,5,"calendar"); <br>cal.init(); <br><br>document.getElementById("cal_prev").onclick=function(){ <br>cal.monthNum--; <br>if(cal.getMonthNum()<1){ <BR>cal.setMonthNum(12); <BR>cal.year--; <BR>} <BR>cal.reflesh(); <BR>} <BR>document.getElementById("cal_next").onclick=function(){ <BR>cal.monthNum <BR>if(cal.getMonthNum()>12){ <br>cal.setMonthNum(1); <br>cal.year ; <br>} <br>cal.reflesh(); <br>} <br>document.getElementById("cal_today").onclick=function(){ <br>cal.setYearNum((new Date).getFullYear()); <br>cal.setMonthNum((new Date).getMonth() 1) <br>cal.reflesh(); <br>} <br>document.getElementById("cal_preyear").onclick=function(){ <br>cal.setYearNum(cal.getYearNum()-1); <br>cal.reflesh(); <br>} <br>document.getElementById("cal_nextyear").onclick=function(){ <br>cal.setYearNum(cal.getYearNum() 1); <br>cal.reflesh(); <br>} <br></script>

总结：
以上代码未加注释，写得有点急。以后再整理一下，许多功能未实现。