js to write a simple calendar effect for the day

I have always wanted to write a calendar using javascript, but I have not tried it because I have no good ideas at all. Recently, I happened to see an example of a simple calendar written in JavaScript on the Internet. Although the amount of code is not large, I think it explains the implementation principle of the js calendar very well. I also tried it myself, and gained a lot. After mastering the basic implementation principles, I can freely use it if I want to add more functions. Let me share it here first. If you are interested, you can try it!

1. The problem of the number of rows in the table

Since you want to display a date table, you must first know how many rows and columns the table has. The number of columns has been determined, starting from Sunday (1st on the calendar) The columns are Sunday) to Saturday, a total of 7 columns. Before solving the row number problem, you must first know what day of the week the first day of this month is, because the first day of each month does not always start from Sunday on the calendar. The first day may be Friday, or Saturday. Uncertain, so the left part of No. 1 must be replaced with an empty form. So how many empty tables should be used to replace it? The getDay() method must be used here. This method 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 falls on a Friday, then 5 empty tables will be needed on the left. Then, if there are 31 days in a month, the final number of table rows is:

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

Of course, not Each month has 31 days, so we have to create an array containing 12 months, each element representing the number of days in each month. But February is special. February in leap years has 29 days, while February in ordinary years only has 28 days. Therefore, before creating the array, you have to create a function to determine the leap year:

//如果当前年份能被4整除但是不能被100整除或者能被400整除，即可确定为闰年，返回1，否则返回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, 30, 31);

This will ensure that no matter it is an ordinary year The correct number of days will be retrieved in leap years. The following code is used to obtain today's relevant information:

var today = new Date(),       //获取当前日期
  y = today.getFullYear(),     //获取日期中的年份
  m = today.getMonth(),      //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
  d = today.getDate(),       //获取日期中的日(方便在建立日期表格时高亮显示当天)
  firstday = new Date(y, m, 1),  //获取当月的第一天
  dayOfWeek = firstday.getDay(),  //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
  days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组

So in the end, you can get the number of rows in the table required for the current month:

var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //确定日期表格所需的行数

2. Print the calendar form

The form itself is a two-dimensional array, so let the for master run two loops and it will be done. The code is as follows:

for (i = 0; i < str_nums; i += 1) {   //第一层for循环创建tr标签
  document.write(&#39;<tr>&#39;);
  for (k = 0; k < 7; k++) {      //第二层for循环创建td标签
   var idx = 7 * i + k;        //为每个表格创建索引,从0开始
   var date = idx - dayOfWeek + 1;  //将当月的1号与星期进行匹配
   //do something else
  }
  document.write(&#39;</tr>&#39;);
  }

3. Attached is the complete js calendar code

<script>
  //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
  function isLeap(year) {
  return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
  }
  var i, k,
  today = new Date(),                 //获取当前日期
  y = today.getFullYear(),              //获取日期中的年份
  m = today.getMonth(),                //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
  d = today.getDate(),                //获取日期中的日(方便在建立日期表格时高亮显示当天)
  firstday = new Date(y, m, 1),            //获取当月的第一天
  dayOfWeek = firstday.getDay(),           //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
  days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),         //创建月份数组
  str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7);                        //确定日期表格所需的行数
  document.write("<table cellspacing=&#39;0&#39;><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); //打印表格第一行(显示星期)
  for (i = 0; i < str_nums; i += 1) {         //二维数组创建日期表格
  document.write(&#39;<tr>&#39;);
  for (k = 0; k < 7; k++) {
   var idx = 7 * i + k;                //为每个表格创建索引,从0开始
   var date = idx - dayOfWeek + 1;          //将当月的1号与星期进行匹配
   (date <= 0 || date > days_per_month[m]) ? date = &#39; &#39;: date = idx - dayOfWeek + 1;  //索引小于等于0或者大于月份最大值就用空表格代替
   date == d ? document.write(&#39;<td class="today">&#39; + date + &#39;</td>&#39;) : document.write(&#39;<td>&#39; + date + &#39;</td>&#39;);  //高亮显示当天
  }
  document.write(&#39;</tr>&#39;);
  }
  document.write(&#39;</table>&#39;);
 </script>

Everyone can play freely with the css part. The current time is May 2, 2016 No., the rendering is as follows:

The above js writing simple calendar effect for the day [implementation code] is all the content shared by the editor, I hope it can give you a For reference, I also hope that everyone will support the Script House PHP Chinese website

For more js related articles about writing simple calendar effects for the day, please pay attention to the PHP Chinese website!