JS write the day simple calendar effect "Implementation Code" _JAVASCRIPT skills

I have always wanted to use JavaScript to write a calendar, but because there is no good idea, so the delay did not try. Recently on the internet just to see the simple calendar with JavaScript examples, the 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 realization, and then want to add more functions, completely can be free to play, first here to share it, interested can try!

I. Table row number problem

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

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

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

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

Then we create a one-month array:

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

This ensures that the correct number of days is taken, whether excepting or leap years, and the following code is used to get information about today:

var today = new Date (),       //Get the current date
  y = Today.getfullyear (),     //Get the year in the date
  m = Today.getmonth (),      // Get the month in a date (note that the month is calculated from 0 and gets less than 1 of the normal month)
  d = today.getdate (),       //Get the day in the date (easy to highlight the day when the date table is created)
  FirstDay = New Date (Y, M, 1),  //Get the first day of the month
  DayOfWeek = Firstday.getday (),  //judge the first day of the week (return [0-6] of one, 0 for Sunday, 1 for Monday,
  days_per_month = new Array (y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),//Create a month array

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

var str_nums = Math.ceil ((DayOfWeek + days_per_month[m))/7); Determine the number of rows required for a date table

Two. Print the calendar form

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) {   //First layer for loop create TR tag
  document.write (' <tr> ');
  for (k = 0; k < 7; k++) {      //second layer for loop create TD tag
   var idx = 7 * i + K;        Create an index for each table, starting at 0
   var date = Idx-dayofweek + 1;  Match the month's number 1th with the week
   //do something else
  }
  document.write (' </tr> ');
  

Three. Attach the complete JS calendar code

<script>//Determine if the current year is a leap years (leap February 29 days, excepting February is only 28 days) function Isleap {Return of the yearly% 4 = 0?
  (Year%!= 0.1: (year% 400 = 0 1:0)): 0; var i, k, today = new Date (),//Get the current date y = Today.getfullyear (),//Get the year in the date m = Toda Y.getmonth (),//Get the month in the date (note: The month is calculated from 0, the value obtained is less than 1 of the normal month) d = today.getdate (),//Get the day in the date (convenient Highlight the day when creating a date table FirstDay = new Date (Y, M, 1),//Get the first day of the Month DayOfWeek = Firstday.getday (),//judge the first day is the star Number of periods (return [0-6], 0 for Sunday, 1 for Monday, etc.) Days_per_month = new Array (y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31                        ),//Create month array str_nums = Math.ceil ((DayOfWeek + days_per_month[m))/7); Determine the number of rows required for a date table document.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 a formFirst line (Show week) for (i = 0; i < str_nums i = 1) {//two D array creation date table document.write (' <tr> ');                for (k = 0; k < 7; k++) {var idx = 7 * i + K;          Create an index for each table, starting at 0 var date = idx-dayofweek + 1; Match the month number 1th with the week (date <= 0 | | date > DAYS_PER_MONTH[M])?  Date = '   ': date = Idx-dayofweek + 1; is the index less than or equal to 0 or greater than the month maximum to replace date = D with a blank table?  document.write (' <td class= ' today ' > ' + date + ' </td> '): document.write (' <td> ' + date + ' </td> ');
  Highlight the day} document.write (' </tr> ');
 } document.write (' </table> '); </script>

The CSS section everyone is free to play it, the current time is May 2, 2016, the effect chart is as follows:

The above JS write the day simple calendar effect "Implementation Code" is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.