Simple calendar created by JavaScript (detailed description)

Simple calendar created by JavaScript (detailed description)

[Program description] It mainly refers to the calendar class, and the methods in it are described as follows:
GetFirstDay: Get the day of each month before the day of the week
GetMonthLen: obtains the total number of days in a month.
CreateCalendar: Calendar Creation Method
ClearCalendar: Clear TABLE method
Init: Running Method

[Method Introduction]
GetFirstDay mainly uses the getDay () method of new Date (), which is used to obtain the day of the week of the Date.
Note that the number of weeks obtained by the getDay () method is as follows:
Sunday is 0, Monday is 1, Tuesday is 2, Wednesday is 3, Thursday is 4, Friday is 5, Saturday is 6

The getMonthLen method is used to obtain the number of days of the current month, that is, to obtain the date of the last day of the current month.
Therefore, the thought is to get the 0 hour of the first day of the next month, and then subtract 3 hours to get the day of the month.
NextMonth. setHours (nextMonth. getHours ()-3 );
<DHTML Cookbook> for reasons less than three hours, see the following: the three-hour correction is used to handle the date calculation exception that occurs during the conversion from the summer time to the winter time in the month.
However, I don't quite understand this explanation, so I just followed the giant's practice. If someone knows what the exception is, let me know.
The setHours () and getDate () Methods of Date are used to obtain the hours and days respectively.

CreateCalendar is used to create a calendar. Because I have already written HTML code, I do not directly use DOM to generate the calendar. Here we mainly write the number of days.
The main process of writing a date is:
For (var I = 1; I <= monthLen; I ++ ){
Calendar. dayTable [I + firstDay-1]. innerHTML = I;
}
MonthLen is the length of the month obtained by the getMonthLen () method. The cycle process should not exceed this length.
FirstDay is obtained by the getFirstDay () method on the first day of the week. As long as I + firstDay, the location of the calendar cell where the first day is located can be obtained. However, because the array starts from 0, 1 is subtracted.
When inserting values in the for loop, judge the date of today and add a special id = "today" for today. The Code is as follows:
If (I + firstDay-2) = new Date (). getDate () & calendar. month = new Date (). getMonth () & calendar. year = new Date (). getFullYear ()){
Calendar. dayTable [I + firstDay-1]. id = 'today ';
}

The clearCalendar method is used to clear the calendar every time you change the month, which is executed mainly by the for loop. The process is relatively simple, so it is not described in detail.

In addition, it is particularly noted that the two click events are for a month, where the previous month and the next month are used:
PreMon. onclick = function (){
Calendar. createCalendar (form, new Date (calendar. year, calendar. month-1, 1 ));
}
NextMon. onclick = function (){
Calendar. createCalendar (form, new Date (calendar. year, calendar. month + 1, 1 ));
}
Since the year and month attributes are set to the calendar ar attributes, you only need to add or subtract the month from the month.
In The onclick event, this points to preMon and nextMon respectively, so this is not used internally and calendar is directly used. this is also the reason why createCalendar does not use this.

[Instructions]
You can modify the HTML and CSS styles by yourself, but do not make too much changes as a whole. directly use the calendar class and use the init method to call the calendar HTML id, as shown below:
Calendar. init (calendars );

In the whole process, you should note that the getFirstDay () and getMonthLen () methods are thinking. As long as you understand the main part, there are many methods to enter the date.
There are still many improvements to the program. I hope you can give me some comments .~ 'Especially in the code, what do you need to pay attention to? I don't write too much code, so I hope you will give criticism and I can correct the mistakes.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = gbk "/> <title> simple calendar created by JavaScript (detailed description)-LIEHUO. NET </title> <style type = "text/css"> # calendar {background: #000; color: # FFF; font-size: 0.8em ;} # tittle {font-size: 1.4em; padding: 4px 0.55em;} # days th {font-weight: bold; text-align: center; padding: 4px 0.55em ;} # calendar td {text-align: center; padding: 4px 0.55em ;}# today {color: # F00; font-weight: bold ;} </style> 





Tip: the code can be modified before running!