js寫出當天簡單日曆效果

之前一直很想用javascript寫一個日曆，但是因為完全沒有好的思路， 所以遲遲沒有嘗試。最近在網路上剛好看到用javascript寫的簡單日曆的例子，程式碼量雖然不大， 但是我覺得很好地闡述了js日曆的實作原理。自己也嘗試著做了一下，收穫蠻大，掌握了基本的實現原理後，再想增加更多的功能，完全就可以自由發揮了，先在這裡分享一下吧，有興趣的可以試試！

一.表格行數問題

既然要顯示日期表格的話，首先得知道這個表格有多少行多少列，列數是已經確定的，從星期天（日曆上第1列是星期天）到星期六一共7列。在解決行數問題之前，還得先知道這個月的第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 (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;);
  }

  三.附上完整的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=&#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>

   

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

以上這篇js編寫當天簡單日曆效果【實現代碼】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家PHP中文網

更多js撰寫當天簡單日曆效果相關文章請關注PHP中文網！