1. Table row count problem
Since you want to display the date table, you must first know how many rows and columns there are in this table. The number of columns has been determined, with a total of 7 columns from Sunday (the first column on the calendar is Sunday) to Saturday. Before solving the problem of row count, you must first know what day of the first day of the month is, because the first day of each month does not start from Sundays on the calendar. It may be Friday and Saturday, so the left part of the 1st must be replaced by an empty table. So how many empty tables should be used instead? Here we have to use the getDay() method, which returns a number in the array [0-6], 0 represents Sunday, 1 represents Monday, 2 represents Tuesday, and so on. So if the 1st of a month is Friday, then 5 empty forms are needed to replace them on the left. Then, if there are 31 days in a month, the last number of rows to be found 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 element represents the number of days each month. However, February is quite special. There are 29 days in February in a leap year and only 28 days in February in a normal year. So, before creating an array, you have to create a function that judges leap years by yourself:
//If the current year can be divisible by 4 but cannot be divisible by 100 or can be divisible by 400, it can be determined as a leap year, return 1, otherwise return 0 function isLeap(year) { 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, 31, 30, 31); This ensures that the correct number of days will be taken out in both ordinary and leap years. The following code is used to obtain relevant 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 the date (it should be noted that: the month is calculated from 0, and the value obtained is 1 less than the value of the normal month) d = today.getDate(), //Get the day in the date (to facilitate highlighting the day when creating the date table) firstday = new Date(y, m, 1), //Get the first day of the month dayOfWeek = firstday.getDay(), //Judge the day of the week (return one in [0-6], 0 represents Sunday, 1 represents Monday, and so on) days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 31, 30, 31, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31), //Create the month array
So in the end, you can get the number of rows of the table required for the month:
var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //Determine the number of rows required for the date table
2. Print a calendar table
The table itself is a two-dimensional array, so let the for master come out and run two loops to complete. The code is as follows:
for (i = 0; i < str_nums; i += 1) { //The first layer for loop creates tr tag document.write('<tr>'); for (k = 0; k < 7; k++) { //The second layer for loop creates td tag var idx = 7 * i + k; //Create index for each table, starting from 0 var date = idx - dayOfWeek + 1; //Match the 1st of the month with the week//do something else } document.write('</tr>'); }3. Attach the complete js calendar code
<script> //Judge whether the current year is a leap year (there are 29 days in February of the leap year and only 28 days in February of the normal year) function isLeap(year) { return year % 4 == 0 ? (year % 100 != 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 = today.getMonth(), //Get the month in the date (it should be noted 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 facilitate highlighting the day when creating the date table) firstday = new Date(y, m, 1), //Get the first day of the month dayOfWeek = firstday.getDay(), //Judge the day of the week (return one in [0-6], 0 represents Sunday, 1 represents Monday, and so on) days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 31, 31, 30, 31, 31, 30, 31, 31, 30, 31, 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 date table document.write("<table cellpacing='0'><tr><th>Day</th><th>Two</th><th>Two</th><th>Four</th><th>Six</th></tr>"); //Print the first row of the table (displaying the week) for (i = 0; i < str_nums; i += 1) { //Create a date table document.write('<tr>'); for (k = 0; k < 7; k++) { var idx = 7 * i + k; //Create an index for each table, starting from 0 var date = idx - dayOfWeek + 1; //Match the 1st of the month with the week (date <= 0 || date > days_per_month[m]) ? date = '': date = idx - dayOfWeek + 1; //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('<td>' + date + '</td>') : document.write('<td>' + date + '</td>'); //Highlight the day} document.write('</tr>'); } document.write('</table>'); </script>Let’s play freely in the CSS part. The current time is May 2, 2016, and the renderings are as follows:
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.