之前一直很想用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編寫當天簡單日曆效果【實現程式碼】就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。