DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js編寫當天簡單日歷效果【實現代碼】
js編寫當天簡單日歷效果【實現代碼】
編輯:關於JavaScript     

之前一直很想用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大師出來跑兩個循環就搞定啦,代碼如下:

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號,效果圖如下:

以上這篇js編寫當天簡單日歷效果【實現代碼】就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved