Effect Chart:
Test code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>calendar2</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> <script type= "Text/javascript" > var calendar = {Daytable:null,//Initialize table Year:null,//initialization year Month:null,///Initialization month getfirstday:function (year,month) {//Get the first day of each month again the number of weeks var firstday = new Date (year,month,1); return Firstday.getday (); Getday () method to get}, Getmonthlen:function (year,month) {//Get the total number of days in the month var nextmonth = new Date (year,month+1,1); Get the first day of the next month nextmonth.sethours (Nextmonth.gethours ()-3); Due to the day is 0 o'clock, so minus 3 hours can be drawn to the number of days of the Month return Nextmonth.getdate (); Return date of day}, Createcalendar:function (form,date) {//Create Calendar Method Calendar.year = Date.getfullyear ();//Get the year at that time and assign it to the Calendar property year so that other methods call Calendar.month = Date.getmonth (); Same as the purpose of getting the year above form.getelementsbytagname (' th ') [1].innerhtml = Calendar.year + ' year ' + (Calendar.month + 1) + ' month '; Insert year and month Calendar.clearcalendar (form); Empty table var Monthlen = Calendar.getmonthlen (calendar.year,calendar.month); Gets the month length var firstday = Calendar.getfirstday (calendar.year,calendar.month); Get the first day of the month for (var i = 1;i <= monthlen;i++) {//cycle write daily values into table calendar.daytable[i+firstday-1].innerhtml = i;//i to The loop value, plus the first day's week value, can just correspond to the table position, but since the array starts at 0, you need to subtract 1 if (i+firstday-2) = = new Date (). GetDate () && Calendar.month = = New Date (). GetMonth () && calendar.year = = new Date (). getFullYear ()) {//Judge whether it is the same day calendar.daytable[i+firstday-1] . id = ' Today '; }}, Clearcalendar: function (Form) {//empty table Method this.daytable = form.getelementsbytagname (' TD '); for (var i = 0;i < this.daytable.length;i++) {this.daytable[i].innerhtml = ' '; This.daytable[i].id = '; }, Init:function (form) {//Main method this.daytable = Form.getelementsbytagname (' TD '); This.createcalendar (Form,new Date ()); var Premon = form.getelementsbytagname (' th ') [0]; var Nextmon = form.getelementsbytagname (' th ') [2]; Premon.onclick = function () {//When the left button is clicked, subtract one months and redraw the table Calendar.createcalendar (form,new Date (Calendar.year, calendar.month-1,1)); Nextmon.onclick = function () {//When the right button is clicked, add one months and redraw the table Calendar.createcalendar (form,new Date (Calendar.year, calendar.month+1,1)); }} window.onload = function () {var calendars = document.getElementById (' calendar '); Calendar.init (calendars); } </script> </pead> <body> <table id= "Calendar" cellspacing= "0" > <tr> <th ><& lt;</th> <th id= "tittle" colspan= "5" > </th>; th >>></th> </tr> <tr id= "Days" > <th> day </th> <th> one </th> <th> Two </th> <th> three </th> <th> four </th> <th> five </th> <th> six </th> </tr > <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> & lt;tr> <td> </td> <td> </td> <td> </td> <td> < /TD> <td> </td> <td> </td> <td> </td> </tr> <tr> & lt;td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td& Gt; </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td& gt; </td> <td> </td> <td> </td> <td> </td> <td > </td> </tr> <tr> <td> </td> <td> </td> <td>& nbsp;</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
[Program notes] mainly for the Calendar class, which means:
Getfirstday: Get the first day of each month and the days of the week
Getmonthlen: How many days are there in total for the month
Createcalendar: Creating a Calendar method
Clearcalendar: Empty Table method
Init: How to Run
[Method Introduction]
The Getday () method for the new date () is mainly used in Getfirstday, which is used to get the day of the week.
But there is a particular need to note that the Getday () method gets the following number of weeks:
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 get the number of days of the month, that is, the target gets the date of the last day of the month.
So the idea is to get the first day of the next month 0 o'clock, and then subtract 3 hours to get the number of days of the month.
Nextmonth.sethours (Nextmonth.gethours ()-3);
Minus the 3-hour reason reference <<dhtml Cookbook>> said: The three-hour correction is used to handle the anomaly of the date calculation that occurs during the month when a transition from summer time to winter time is included.
But I don't quite understand that, so just follow the giant's example, and if anyone knows what's going on with the anomaly, you can tell me.
The method mainly uses the date sethours () and getdate () methods, respectively, to obtain hours and days.
Createcalendar the method of creating the calendar, because I originally wrote the HTML code, so I do not use the DOM to generate, here is mainly the number of written dates.
The main process for 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 that the Getmonthlen () method obtains, and the loop should not exceed that length.
FirstDay gets the week value of the first day by the Getfirstday () method, as long as the i+firstday can get the position of the calendar cell that started the first day, but because the array starts at 0, subtract another 1.
In the process of inserting a value for the loop and judging today's date, and adding a special id= today, the code is as follows:
if (i+firstday-2) = = new Date (). GetDate () && calendar.month = = new Date (). GetMonth () && calendar.year = n EW Date (). getFullYear ()) {
Calendar.daytable[i+firstday-1].id = ' Today ';
}
Clearcalendar method is used to change the process of each month, empty the calendar, mainly by for loop execution, the process is relatively simple, so not much detailed introduction.
In addition, note that 2 Click events, which are for the month forward one months and back one months:
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));
}
Because the whole year and month are set to the properties of the calendar, you only need to add and subtract the month in the process.
Because in the OnClick event, this points to Premon and Nextmon, so it is not used internally, and the calendar is used directly. In Createcalendar do not use this is also the reason.
[Use instructions]
HTML and CSS styles can be modified by themselves, but the whole thing doesn't change much. The Calendar class is being used directly, and the Init method is used to transfer the ID of the calendaring HTML to the following:
Calendar.init (calendars);
Throughout the process, attention is given to the Getfirstday () and Getmonthlen () methods of thinking, as long as the main part is understood. There are many ways to enter dates.
There are many improvements to the process, I hope you give some advice. ~ ' Especially in the code, there are places to pay attention to, I write code is not too much, so I hope you give criticism, and then I can find mistakes to correct.
