Js: compile a simple calendar for the day. [Implementation Code] _ javascript skills

The following small series will bring you a simple Calendar effect on the day of js writing [Implementation Code ]. I think it is quite good. Now I want to share it with you and give you a reference. I have always wanted to use javascript to write a calendar, but I have not tried it because I have no idea. Recently, I saw a simple calendar example written in javascript on the Internet. Although the Code volume is not large, I think the implementation principle of js calendar is well elaborated. I also tried to do it myself. I learned a lot about it. After mastering the basic implementation principles, I want to add more functions so that I can play it freely. Let's share it here first, if you are interested, try it!

I. Number of table rows

To display a date table, you must first know the number of rows and columns in the table. The number of columns is determined, from Sunday (the 1st columns on the calendar are Sunday) to Saturday. Before solving the number of rows problem, we must first know that the first day of the month is the day of the week, because the first day of each month does not start from Sunday on the calendar, maybe the first day is Friday, it may be Saturday, so the left part of the first part should be replaced by an empty table. Instead of how many empty tables are used, the getDay () method is used here. This method returns a number in the array [0-6]. 0 indicates Sunday, and 1 indicates Monday, 2 represents Tuesday, and so on. Therefore, if the first day of a month is Friday, five empty tables are needed on the left. Then, if there are 31 days in a month, the number of rows in the final table is:

Var tr_nums = Math. ceil (5 + 31)/7 );

Of course, not every month is 31 days, so we have to create an array containing 12 months, each element represents the number of days in each month. However, February is special. There are 29 days in February, and only 28 days in February. Therefore, before creating an array, you must create a function to determine the leap year:

// If the current year can be divisible by 4 but cannot be divisible by 100 or 400, it can be determined as a leap year, and 1 is returned; otherwise, 0 function isLeap (year) is returned) {return year % 4 = 0? (Year % 100! = 0? 1: (year % 400 = 0? 1: 0): 0 ;}

Then we create an array of months:

var days_per_month = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

In this way, we can ensure that the correct number of days will be taken out in both the year of the year and the year of the leap. The following code is used to obtain information about today:

Var today = new Date (), // obtain the current Date y = today. getFullYear (), // obtain the year m = today in the date. getMonth (), // obtain the month in the date (note that the month is calculated from 0, and the obtained value is 1 less than the value of the normal month) d = today. getDate (), // get the day in the Date (to highlight the day when the Date table is created) firstday = new Date (y, m, 1 ), // obtain the first day of the month dayOfWeek = firstday. getDay (), // determine the day of the week on the first day (return one of [0-6], 0 indicates Sunday, 1 indicates Monday, and so on) days_per_month = new Array (31, 28 + isLeap (y), 31, 30, 31, 30, 31, 31, 30, 31), // create a month Array

Therefore, you can obtain the number of rows in the table for the current month:

Var str_nums = Math. ceil (dayOfWeek + days_per_month [m])/7); // determine the number of rows required for the date table

Ii. Print a calendar table

The table itself is a two-dimensional array, so let the for Master come out and run two loops. The Code is as follows:

For (I = 0; I <str_nums; I + = 1) {// create the tr tag document. write (''); For (k = 0; k <7; k ++) {// The second layer for loop creates the td tag var idx = 7 * I + k; // create an index for each table, var date = idx-dayOfWeek + 1 from 0; // match the day 1 of the current month with the day of the week // do something else} document. write ('');}

3. Complete js calendar code is attached.

Script // determines whether the current year is a leap year (29 days in February of a leap year and 28 days in August of a year) function isLeap (year) {return year % 4 = 0? (Year % 100! = 0? 1: (year % 400 = 0? 1: 0): 0;} var I, k, today = new Date (), // obtain the current Date y = today. getFullYear (), // obtain the year m = today in the date. getMonth (), // obtain the month in the date (note that the month is calculated from 0, and the obtained value is 1 less than the value of the normal month) d = today. getDate (), // get the day in the Date (to highlight the day when the Date table is created) firstday = new Date (y, m, 1 ), // obtain the first day of the month dayOfWeek = firstday. getDay (), // determine the day of the week on the first day (return one of [0-6], 0 indicates Sunday, 1 indicates Monday, and so on) days_per_month = new Array (31, 28 + isLeap (y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), // create the month array str_nums = Math. ceil (dayOfWeek + days_per_month [m])/7); // determine the number of rows required for the date table document. write ("
 
 "); // Print the first row of the table (display week) for (I = 0; I <str_nums; I + = 1) {// create date table document with two-dimensional arrays. write (' 
   
     '); For (k = 0; k <7; k ++) {var idx = 7 * I + k; // create an index for each table, var date = idx-dayOfWeek + 1 from 0; // match the day 1 of the current month with the day of the week (date <= 0 | date> days_per_month [m])? Date = '': date = idx-dayOfWeek + 1; // If the index is less than or equal to 0 or greater than the maximum value of the month, use an empty table instead of date = d? Document. write (' 
    '): Document. write (' 
    '); // Highlight the day} document. write (' 
   ');} Document. write (' 
  

  
  
 
   
 
    
Day
 
    
I
 
    
II
 
    
3.
 
    
Thu
 
    
V.
 
    
Sat.
 
   
'+ Date +'
'+ Date +'
 
 
'); Script

You can use css for free. The current time is May 2, 2016, as shown below:

The above js compilation of the simple Calendar Effect of the day [Implementation Code] is all the content shared by xiaobian to everyone. I hope to give you a reference, but also hope you can support the home of foot.