JS implements a simple calendar

This article mainly introduces the sample code for implementing a calendar using js and parse its implementation principles. It has good reference value. Let's take a look at it with the small Editor below. There are three main parts: 1: Get li element 2: how to fill in the corresponding date 3: how to get the event of clicking li element.

1: Get the li element through the children attribute of the relationship between nodes (two for bad traversal );

2: when entering the date in traversal, the first row determines the day of the week on the first day of the current month, and then enters the number from the first day until the number of days in the current month is suspended, enter the date of the next month. The first line shows the date of the previous month: the number of days of the previous month shows the start value = the number of days of the previous month-the number of days of the previous month in the day of the week-1, then, the number of days in the first row last month shows the start value auto-increment.

3: Use JS event bubbling to get the innerHTML of li to display the corresponding date

:

  
  
  
  
  
  Calendar     
 
 
February 1, 2017
 
 
 
 
 
 
 
 
  
  
Day
 
  
  
I
 
  
  
II
 
  
  
3.
 
  
  
Thu
 
  
  
V.
 
  
  
Sat.
 
  
  
 
   
 
   
 
 
   
 
    
30
 
    
31
 
    
1
 
    
2
 
    
3
 
    
4
 
    
5
 
   
 
   
 
    
6
 
    
7
 
    
8
 
    
9
 
    
10
 
    
11
 
    
12
 
   
 
   
 
    
13
 
    
14
 
    
15
 
    
16
 
    
17
 
    
18
 
    
19
 
   
 
   
 
    
20
 
    
21
 
    
22
 
    
23
 
    
24
 
    
25
 
    
26
 
   
 
   
 
    
27
 
    
28
 
    
1
 
    
2
 
    
3
 
    
4
 
    
5
 
   
 
   
 
    
27
 
    
28
 
    
1
 
    
2
 
    
3
 
    
4
 
    
5
 
   
 
   
 
   
Script function $ (id) {return document. getElementById (id);} function change (cls) {return document. getElementsByClassName (cls);} function getDateNum (e) {console. log (e & e.tar get. nodeName) // print the event element, and then obtain the element nodeName if(e.tar get. nodeName = "LI") {// first judge whether nodeName is LI if(e.tar get. className! = "Gray") {// click the date of the current month, which is displayed in the date bar change ("content") [0]. innerHTML = yearpolic' '{(month=1}'''{e.tar get. innerHTML + 'day';} else {// click the gray date (last month or next month) to switch to the current month if(e.tar get. innerHTML> 14) {lastMonth () ;}else {nextMonth () ;}}// obtain the year and month var today = new Date (); var year = today. getFullYear (), month = today. getMonth (); var totalDay; var uls = $ ("date "). children, list; function loadCalendar () {totalDay = getMonthDays (year, month + 1); // calculate the number of days of a month var firstDay = (new Date (year, month, 1 )). getDay (); // calculate the number of var lastMonthDay = getMonthDays (year, month) on the first day of each month; var lastDayCal = lastMonthDay-firstDay + 1; // calculate the number of days displayed in the first row of the last month. // obtain the ul element var num = 1, nextNum = 1; // Date display // convert the class Array object to an Array // uls = Array. prototype. slice. call (uls) // obtain the li element filling for (var r = 0; r  = FirstDay) {list [line]. innerHTML = num ++; list [line]. setAttribute ("class", "");} else {list [line]. innerHTML = lastDayCal ++; // the number of days in the first row last month is displayed in list [line]. setAttribute ("class", "gray") ;}} else {// determines whether the number of days has exceeded. If the number of days is not exceeded, add again, if (num <= totalDay) {list [line]. setAttribute ("class", ""); list [line]. innerHTML = num ++;} else {list [line]. innerHTML = nextNum ++; // display list [line] on the date of the next month. setAttribute ("class", "gray") ;}}} lo AdCalendar (); function getMonthDays (year, month) {// judge the number of days in January if (month = 2) {days = (year % 4 = 0) & (year % 100! = 0) | (year % 400 = 0 )? 29:28;} else {// month 1-7 singular month is 31 days if (month <7) {days = month % 2 = 1? 31: 30;} else {// The 8-12 month double month is the 31 day days = month % 2 = 0? 31: 30 ;}} return days ;}// right-click the arrow next month. // change ("rf-tri") [0]. onclick = function nextMonth () {month ++; if (month> 11) {year + = 1; month = 0;} change ("content") [0]. innerHTML = year + "year" + (month + 1) + "month" + "1 day"; // console. log (month + 1); loadCalendar ();} // left-click the Arrow last month. // change ("lf-tri") [0]. onclick = function lastMonth () {month --; if (month <0) {month = 11; year-= 1;} change ("content") [0]. innerHTML = year + "year" + (month + 1) + "month" + "1 day"; // console. log (month + 1); loadCalendar ();} script 
 
  
 
 

For more JS implementations of a simple calendar-related article, please follow the PHP Chinese network!