JS writing the day simple calendar

I always wanted to write a calendar with JavaScript, but because there is no good idea, so slow to try. Recently on the internet just see the example of a simple calendar written in JavaScript, although the amount of code is small, but I think it is very good to explain the implementation of the JS calendar principle. Oneself also tried to do a bit, the harvest is quite big, mastered the basic principle of implementation, and then want to add more features, completely free to play, first here to share it, interested can try!

I. Number of table rows

Now that you want to display the date table, first you need to know how many rows the table has, the number of columns has been determined, from Sunday (the 1th column of the calendar is Sunday) to a total of 7 columns in Children's Day. To solve the problem of the number of rows before, you have to know the 1th day of the month is the week, because each month of the 1th is not all from the calendar began in Sunday, maybe 1th is Friday, Saturday may be, so the left part of the 1th, you have to use empty form instead. So how many empty tables are used instead, the Getday () method is used, the method returns a number in the array [0-6], 0 for Sunday, 1 for Monday, 2 for Tuesday, and so on. So if the one-month number 1th is Friday, then just the left requires 5 empty tables instead. Then, if there are 31 days in one months, the last number of table rows to be calculated is:

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

Of course, not every month is 31 days, so we have to create an array that contains 12 months, each of which represents the number of days that each month contains. But February is very special, leap year February has 29 days, common year February only 28 days. So, before creating an array, you have to create a function that determines the leap year:

1 // If the current year can be divisible by 4 but not divisible by 100 or divisible by 400, it can be determined as leap years, return 1, or return 0 2 function Isleap (year) {3  return Year% 4 = = 0? (Year%!! = 0? 1: (Year% = = = 0? 1:0)): 0; 4 }

　　

Then we create a one-month array:

1 var New Array (Isleap), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

This will ensure that the correct number of days are taken out either common year or leap years, and the following code is used to get information about today:

1 varToday =NewDate (),//Get Current date2y = Today.getfullyear (),//get the year in the date3m = Today.getmonth (),//gets the month in the date (note that the month is calculated starting from 0, and the obtained value is 1 less than the normal month value)4D = today.getdate (),//gets the day of the date (it is convenient to highlight the day when the build date table is displayed)5FirstDay =NewDate (Y, M, 1),//get the first day of the month6DayOfWeek = Firstday.getday (),//determine the day of the week (return to one of [0-6], 0 for Sunday, 1 for Monday, etc.)7Days_per_month =NewArray (31, 30, 31, 30, 31, 31, 30, 31, 30, 31), Isleap (y),//Create a month array

So you can finally get the number of rows for the table you want in the month:

1 var // determine the number of rows required for a date table

Two. Print the Calendar table

The table itself is a two-dimensional array, so let the for master come out and run two loops to get it done, the code is as follows:

1  for(i = 0; i < str_nums; i + = 1) {//first layer for loop create TR label2document.write (' <tr> '));3      for(k = 0; k < 7; k++) {//second layer for loop create TD label4      varIDX = 7 * i + K;//Create an index for each table, starting with 05      varDate = Idx-dayofweek + 1;//match the month 1th to the week6      //Do something else7     }8document.write (' </tr> '));9}

Three. Attach the full JS calendar code

1<script>2    //determines whether the current year is a leap years (leap February has 29 days, common year February only 28 days)3    functionIsleap (year) {4     returnYear% 4 = = 0? (Year%!! = 0? 1: (year% 400 = = 0? 1:0)): 0;5    }6    varI, K,7Today =NewDate (),//Get Current date8y = Today.getfullyear (),//get the year in the date9m = Today.getmonth (),//gets the month in the date (note that the month is calculated starting from 0, and the obtained value is 1 less than the normal month value)TenD = today.getdate (),//gets the day of the date (it is convenient to highlight the day when the build date table is displayed) OneFirstDay =NewDate (Y, M, 1),//get the first day of the month ADayOfWeek = Firstday.getday (),//determine the day of the week (return to one of [0-6], 0 for Sunday, 1 for Monday, etc.) -Days_per_month =NewArray (31, 30, 31, 30, 31, 31, 30, 31, 30, 31), Isleap (y),//Create a month array -Str_nums = Math.ceil ((DayOfWeek + days_per_month[m])/7);//determine the number of rows required for a date table thedocument.write ("<table cellspacing= ' 0 ' ><tr><th> day </th><th> one </th><th> two </th><th> three </th><th> four </th><th> five </th><th> six </th></tr> ");//Print the first row of the table (Show week) -     for(i = 0; i < str_nums; i + = 1) {//two-dimensional array creation date table -document.write (' <tr> ')); -      for(k = 0; k < 7; k++) { +      varIDX = 7 * i + K;//Create an index for each table, starting with 0 -      varDate = Idx-dayofweek + 1;//match the month 1th to the week +(Date <= 0 | | date > DAYS_PER_MONTH[M])? Date = ' &nbsp; ': date = Idx-dayofweek + 1;//index is less than or equal to 0 or greater than the month maximum is replaced with an empty table ADate = = d? document.write (' <td class= ' today ' > ' + date + ' </td> '): document.write (' <td> ' + date + ' </td> ');//Highlight the day at     } -document.write (' </tr> ')); -    } -document.write (' </table> ')); -</script>

CSS part of the freedom to play it, the current time is May 1, 2016 Labor Day, I wish you a pleasant day to play, Ha, as follows:

JS writing the day simple calendar