基於javascript編寫簡單日曆_javascript技巧

一.表格行數問題

     既然要顯示日期表格的話，首先得知道這個表格有多少行多少列，列數是已經確定的，從星期天（日曆上第1列是星期天）到星期六一共7列。要解決行數問題之前，還得Crowdsourced Security Testing道這個月的第1天是星期幾，因為每個月的1號並不都是從日曆上的星期天開始排的，可能1號是星期五，星期六也說不定，所以1號的左邊部分，就得用空表格代替了。那麼用多少個空表格代替呢，這裡就得用到getDay()方法了，該方法返回數組[0-6]中的一個數字，0代表星期天，1代表星期一，2代表星期二，以此類推。所以如果一個月的1號是星期五的話，那麼剛好左邊需要5個空表格代替。然後，假如一個月有31天，最後求出的表格行數就是：

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

    當然，並不是每個月都是31天，所以我們得建立一個包含12個月份的數組，每個元素代表每個月份所包含的天數。但是2月份比較特殊，閏年的2月份有29天，平年的2月份只有28天。所以，在建立數組之前，得自己建立一個判斷閏年的函數:

 //如果當前年份能被4整除但是不能被100整除或者能被400整除，即可確定為閏年，返回1，否則返回0 function isLeap(year) { return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0; }

然後我們建立一個月份數組: 

var days_per_month = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 這樣就能保證無論是平年還是閏年都會取出正確的天數，下面的代碼用於擷取今天的相關資訊: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), //建立月份數組

所以最後就可以擷取當月所需表格的行數:

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

二.列印日曆表格

表格本身是一個二維數組，所以讓for大師出來跑兩個迴圈就搞定啦，代碼如下:

for (i = 0; i < str_nums; i += 1) {   //第一層for迴圈建立tr標籤  document.write('<tr>');  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('</tr>');  }

 

三.附上完整的js日曆代碼

<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='0'><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('<tr>');  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 = ' ': date = idx - dayOfWeek + 1;  //索引小於等於0或者大於月份最大值就用空表格代替   date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>');  //高亮顯示當天  }  document.write('</tr>');  }  document.write('</table>'); </script> 

css部分大家就自由發揮吧，目前時間是2016年5月2號，效果圖如下:

以上就是本文的全部內容，希望對大家學習javascript程式設計有所協助。