js编写当天简单日历

      以前一直很想用javascript写一个日历，可是由于彻底没有好的思路， 因此迟迟没有尝试。最近在网上恰好看到用javascript编写的简单日历的例子，代码量虽然不大， 可是我以为很好地阐述了js日历的实现原理。本身也尝试着作了一下，收获蛮大，掌握了基本的实现原理后，再想增长更多的功能，彻底就能够自由发挥了，先在这里分享一下吧，有兴趣的能够试试！

 

     一.表格行数问题

     既然要显示日期表格的话，首先得知道这个表格有多少行多少列，列数是已经肯定的，从星期天（日历上第1列是星期天）到星期六一共7列。要解决行数问题以前，还得先知道这个月的第1天是星期几，由于每月的1号并不都是从日历上的星期天开始排的，可能1号是星期五，星期六也说不定，因此1号的左边部分，就得用空表格代替了。那么用多少个空表格代替呢，这里就得用到getDay()方法了，该方法返回数组[0-6]中的一个数字，0表明星期天，1表明星期一，2表明星期二，以此类推。因此若是一个月的1号是星期五的话，那么恰好左边须要5个空表格代替。而后，假如一个月有31天，最后求出的表格行数就是：

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

  

 

    固然，并非每月都是31天，因此咱们得建立一个包含12个月份的数组，每一个元素表明每月份所包含的天数。可是2月份比较特殊，闰年的2月份有29天，平年的2月份只有28天。因此，在建立数组以前，得本身建立一个判断闰年的函数:

1 //若是当前年份能被4整除可是不能被100整除或者能被400整除，便可肯定为闰年，返回1，不然返回0
2 function isLeap(year) {
3  return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
4 }

　　

 

  而后咱们建立一个月份数组:

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

  这样就能保证不管是平年仍是闰年都会取出正确的天数，下面的代码用于获取今天的相关信息:

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

因此最后就能够获取当月所需表格的行数:

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

 

 

    二.打印日历表格

   表格自己是一个二维数组，因此让for大师出来跑两个循环就搞定啦，代码以下:

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

 

 

    三.附上完整的js日历代码

    

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

 

css部分你们就自由发挥吧，当前时间是2016年5月2号，效果图以下:

 

github地址: https://github.com/Downsview/calendar-demo/