Create a js calendar (native JS calendar)

Preface first, I declare that the method is based on some information on the Internet, such as the leap year, such as the day of the week on the first day of each month. If you don't talk too much about it, you can split the functions and try to describe them as clearly as possible. 1. Determine the leap year copy code // determine the leap year function runNian (_ year) {if (_ year % 400 = 0 | (_ year % 4 = 0 & _ year % 100! = 0) {return true;} else {return false;} copy Code 2, determine the day of the week for the first day of a month in a year. Copy the code // determine the day of the week for the first day of a month in a year. function getFirstDay (_ year, _ month) {var allDay = 0, y = _ year-1, I = 1; allDay = y + Math. floor (y/4)-Math. floor (y/100) + Math. floor (y/400) + 1; for (; I <_ month; I ++) {switch (I) {case 1: allDay + = 31; break; case 2: if (runNian (_ year) {allDay + = 29;} else {allDay + = 28;} break; case 3: allDay + = 31; bre Ak; case 4: allDay + = 30; break; case 5: allDay + = 31; break; case 6: allDay + = 30; break; case 7: allDay + = 31; break; case 8: allDay + = 31; break; case 9: allDay + = 30; break; case 10: allDay + = 31; break; case 11: allDay + = 30; break; case 12: allDay + = 31; break;} return allDay % 7;} copy code 3 to create a calendar table, show the calendar (The table should first write the structure and style on the Static Page, and then splice it here. Here we only do the demonstration, do not attach the style) copy the code // display the Calendar function showCalendar (_ year, _ month, _ day, firs TDay) {var I = 0, monthDay = 0, showStr = "", _ classname = "", today = new Date (); // switch (_ month) {case 1: monthDay = 31; break; case 2: if (runNian (_ year) {monthDay = 29;} else {monthDay = 28;} break; case 3: monthDay = 31; break; case 4: monthDay = 30; break; case 5: monthDay = 31; break; case 6: monthDay = 30; break; case 7: monthDay = 31; break; case 8: monthDay = 31; break; case 9: monthDay = 30; break; case 10: monthDay = 31; break; case 11: monthDay = 30; break; case 12: monthDay = 31; break ;} // output the calendar table, which varies according to the structure. showStr = "<table class = 'cld-W'> <thead> "; // showStr + = "<tr> <th colspan = '7'> <div class = 'cld-HD'> <span class = 'cld-pre'> & lt; </span> <em id = 'showdate' value = '"+ _ year +"-"+ _ month +"-"+ _ day +"'> "+ _ year + "year" + _ month + "month" + _ day + "day" + "</em> <span c Lass = 'cld-next'> & gt; </span> </div> </th> </tr> "; // showStr + = "<tr> <th> day </th> <th> 1 </th> <th> 2 </th> <th> 3 </th> <th> 4 </th> <th> 5 </th> <th> 6 </th> </tr> "; showStr + = "</thead> <tbody> <tr>"; // The space before the first day of the month for (I = 1; I <= firstDay; I ++) {showStr + = "<td> </td>" ;}// display the number of days of the current month for (I = 1; I <= monthDay; I ++) {// Date of the current day if (_ year = today. getFullYear () & _ month = today. getMonth () + 1 & I === today. getDate () {_ classna Me = "cld-cur";} // date before the current day (this is determined because I have a work requirement that the previous date cannot be clicked) else if (_ year <today. getFullYear () | (_ year = today. getFullYear () & _ month <= today. getMonth () | (_ year = today. getFullYear () & _ month = today. getMonth () + 1 & I <today. getDate () {_ classname = "cld-old";} // other common date else {_ classname = "cld-day ";} // other dates that are later than the month of the current month (to enable cld-cur class to be added to the same date when you click the next month, January 1, January) if (_ day ==== I & (_ year> today. GetFullYear () | _ month> today. getMonth () + 1) {_ classname = "cld-cur ";} // store the corresponding value showStr + = "<td class =" + _ classname + "value = '" + _ year + "-" + _ month + "-" + I + "'>" + I + "</td> "; firstDay = (firstDay + 1) % 7; if (firstDay === 0 & I! = MonthDay) {showStr + = "</tr> <tr>" ;}}// the remaining space if (firstDay! = 0) {for (I = firstDay; I <7; I ++) {showStr + = "<td> </td> ";}} showStr + = "</tr> </tbody> </table>"; // Insert the calendar in the calendar page structure. innerHTML = showStr;} copy Code 4. The current year, month, and day are displayed in the calendar header. Copy the code // display the year, month, and day function showDate (_ year, _ month, _ day) {var date = "", firstDay = getFirstDay (_ year, _ month, _ day); if (_ day! = 0) {date = _ year + "year" + _ month + "month" + _ day + "day";} else {date = "No Choose. ";} document. getElementById ("showDate "). innerHTML = date; // showCalendar (_ year, _ month, _ day, firstDay) is displayed in the calendar header; // call the calendar display function} copy Code 5, copy the code in the last month, and next month. // run the function preMonth (_ year, _ month, _ day) {if (_ month = 1) {showDate (_ year, _ day);} else {showDate (_ year, _ month-1, _ day);} // function nextMonth (_ year, _ month, _ day) next to January ){ If (_ month = 12) {showDate (_ year + 1,1, _ day);} else {showDate (_ year, _ month + 1, _ day );}} copy Code 6. initialize and copy the calendar code // initialize var calendar = document. createElement ('div '); calendar. setAttribute ('id', 'showcld'); document. getElementById ("box "). appendChild (calendar); // Add it to your box // obtain the Date, year, month, and day var today = new Date (); var _ year = today. getFullYear (), _ month = today. getMonth () + 1, _ day = today. getDate (); var firstDay = GetFirstDay (_ year, _ month); // display the calendar showCalendar (_ year, _ month, _ day, firstDay); copy code 7, copy the calendar Click Event code // calendar click event Delegate (you can check the js bubble application) calendar. onclick = function (e) {var e = e | window. event; var target = e. srcElement | e.tar get; // splits the year, month, and day of the calendar header into an array, which is saved in the value Attribute dayArr = document. getElementById ('showdate '). getAttribute ('value '). split ('-'); if (target) {// if it is a date that can be clicked if (target. className = "cld-day" | target. ClassName = "cld-cur") {dateArr = target. getAttribute ('value '). split ('-'); // minus 0 is to convert the string to the numeric type. The following is the same as showDate (dateArr [0]-0, dateArr [1]-0, dateArr [2]-0); calendar. className = "";} // if it was last month, click else if (target. className = "cld-pre") {preMonth (dayArr [0]-0, dayArr [1]-0, dayArr [2]-0 );} // click else if (target. className = "cld-next") {nextMonth (dayArr [0]-0, dayArr [1]-0, dayArr [2]-0 );}}}; copy code -- I wrote all the explanations in the Code. The Code functions are concise and crude, but I am not familiar with js inheritance encapsulation yet.