Date Object properties and Object methods in JavaScript--Implementing a simple calendar

Internet search "JS Calendar plugin" will come out of various effects of rich calendar plugin, many can download the source code, and then according to their own needs to modify the source code can be used directly.

But today is not about how to use these plugins, but how to implement a very simple calendar with only the current month, specific effects such as:

(Time is 2017-7-27), the following shows the implementation of the Code:

. Wrap{font-size:0; }. Weeks span{Display:Inline-block;font-size:14px;width:47px;Height:44px;Line-height:44px;Border:1px solid #EFEFEF;text-align:Center; }#dates span{font-size:14px;Display:Inline-block;width:47px;Height:49px;Line-height:49px;text-align:Center;Border:1px solid #EFEFEF; }#dates Span.today{Color:#00ADB5; }

<Divclass= "Wrap">    <Divclass= "Weeks">        <span>Day</span>        <span>One</span>        <span>Two</span>        <span>Three</span>        <span>Four</span>        <span>Five</span>        <span>Six</span>    </Div>    <DivID= "Dates">                    </Div></Div>

varmoday=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//write out the total number of days per month, and define the number of days to an arrayvarD=NewDate ();varMonth=d.getmonth (+1);//the current monthvarDays=d.getdate ();//The current month's numberedvarYears=d.getfullyear ();//the current yearvarrun=years%4;//the number of days in February must be differentiated this year is not leapif(run!=0) {moday[1]=28;//days in February}Else{moday[1]=29;}varDate=NewDate ();d ate.setdate (1);//set a day of the current month. The calendar is Sunday in the first place, Saturday in the last one:varmomatch=[0,1,2,3,4,5,6];//This is the number of seats in front of the current month, Sunday not, week one by one, etc.vardangqian=Momatch[date.getday ()];
varDates=document.getelementbyid ("Dates"); for(I=1;i<=parseint (Dangqian); i++) {dates.innerhtml+ = ' <span> ' + ' &nbsp; ' + ' </span> ';}varPreall = parseint (moday[month-1]+Dangqian); number of blanks in front of the current month 1th + total days of the month  for(I=parseint (dangqian+1); i<= preall;i++){    if(I%7==1 && I!=1) {dates.innerhtml+ = ' <br> ';//every seven is a row     }     if(i== (Days+dangqian)) {//Add class name to today, easy to set style days is the current number plus the preceding white space is Idates.innerhtml+= ' <span class= "Today" > ' +parseint (I-dangqian) + ' </span> '; }Else{dates.innerhtml+ = ' <span> ' +parseint (I-dangqian) + ' </span> '; }} for(i=preall;i< (parseint (PREALL/7) +1) *7; i++) {dates.innerhtml+= ' <span> ' + ' &nbsp; ' + ' </span> ';//spare parts of the complete form}

Looking directly at the implementation of the code above should not be difficult to understand the principle of the implementation of the calendar, if not understood, we will learn the next JavaScript in the time-date related properties and methods.

The above code to use the method is described below, and very clear Oh!

Date Object Properties

Properties	Description
Constructor	Returns a reference to the Date function that created this object.
Prototype	gives you the ability to add properties and methods to an object.

    Date Object method

Method	Description
Date ()	Returns the date and time of day.
GetDate ()	Returns the day of the one month (1 ~ 31) from the Date object.
GetDay ()	Returns the day of the week from a Date object (0 ~ 6).
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 the getFullYear () method instead.
GetHours ()	Returns the hour (0 ~ 23) of the Date object.
Getminutes ()	Returns the minute (0 ~ 59) of the Date object.
Getseconds ()	Returns the number of 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 minute difference between local time and Greenwich Mean Time (GMT).
getUTCDate ()	Returns the day of the month from the Date object according to the world (1 ~ 31).
GetUTCDay ()	Returns the day of the week from the Date object according to the world (0 ~ 6).
getUTCMonth ()	Returns the month (0 ~ 11) from the Date object according to the world.
getUTCFullYear ()	Returns a four-digit year from a Date object, based on the world.
getUTCHours ()	Returns the hour (0 ~ 23) of the Date object according to the universal.
getUTCMinutes ()	Returns the minute (0 ~ 59) of the Date object according to the universal.
getUTCSeconds ()	Returns the seconds (0 ~ 59) of a Date object according to the universal.
getUTCMilliseconds ()	Returns the milliseconds (0 ~ 999) of a Date object according to the universal.
Parse ()	Returns the number of milliseconds from midnight January 1, 1970 to the specified date (string).
SetDate ()	Sets the day of the month in the Date object (1 ~ 31).
Setmonth ()	Sets the month (0 ~ 11) in the Date object.
setFullYear ()	Sets the year (four digits) in the Date object.
Setyear ()	Please use the setFullYear () method instead.
Sethours ()	Sets the hour (0 ~ 23) in the Date object.
Setminutes ()	Sets the minute (0 ~ 59) in the Date object.
Setseconds ()	Sets the second (0 ~ 59) in the Date object.
Setmilliseconds ()	Sets the milliseconds (0 ~ 999) in the Date object.
SetTime ()	Sets the Date object in milliseconds.
SetUTCDate ()	Sets the day of the month in the Date object according to the world time (1 ~ 31).
setUTCMonth ()	Sets the month (0 ~ 11) in the Date object according to the world time.
setUTCFullYear ()	Sets the year (four digits) in the Date object according to the world time.
setUTCHours ()	Sets the hour in the Date object according to the world time (0 ~ 23).
setUTCMinutes ()	Sets the minute (0 ~ 59) in the Date object according to the world.
setUTCSeconds ()	Sets the seconds in the Date object according to the world time (0 ~ 59).
setUTCMilliseconds ()	Sets the milliseconds (0 ~ 999) in the Date object according to the world time.
Tosource ()	Returns the source code for the object.
ToString ()	Converts a Date object to a string.
toTimeString ()	Converts the time portion of a Date object to a string.
toDateString ()	Converts the date part of a Date object to a string.
toGMTString ()	Please use the toutcstring () method instead.
toUTCString ()	Converts a Date object to a string, depending on the universal.
toLocaleString ()	Converts a Date object to a string, based on the local time format.
toLocaleTimeString ()	Converts the time portion of a Date object to a string, based on the local time format.
toLocaleDateString ()	Converts the date part of a DateTime object to a string, based on the local time format.
UTC ()	Returns the number of milliseconds from January 1, 1970 to the specified date, depending on the time.
ValueOf ()	Returns the original value of the Date object.

The following is a detailed case study of some common methods: 

Date Object properties and Object methods in JavaScript--Implementing a simple calendar