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/