下面小編就為大家?guī)硪黄猨s編寫當(dāng)天簡(jiǎn)單日歷效果【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
之前一直很想用javascript寫一個(gè)日歷，但是因?yàn)橥耆珱]有好的思路， 所以遲遲沒有嘗試。最近在網(wǎng)上剛好看到用javascript編寫的簡(jiǎn)單日歷的例子，代碼量雖然不大， 但是我覺得很好地闡述了js日歷的實(shí)現(xiàn)原理。自己也嘗試著做了一下，收獲蠻大，掌握了基本的實(shí)現(xiàn)原理后，再想增加更多的功能，完全就可以自由發(fā)揮了，先在這里分享一下吧，有興趣的可以試試！
一.表格行數(shù)問題
既然要顯示日期表格的話，首先得知道這個(gè)表格有多少行多少列，列數(shù)是已經(jīng)確定的，從星期天（日歷上第1列是星期天）到星期六一共7列。要解決行數(shù)問題之前，還得先知道這個(gè)月的第1天是星期幾，因?yàn)槊總€(gè)月的1號(hào)并不都是從日歷上的星期天開始排的，可能1號(hào)是星期五，星期六也說不定，所以1號(hào)的左邊部分，就得用空表格代替了。那么用多少個(gè)空表格代替呢，這里就得用到getDay()方法了，該方法返回?cái)?shù)組[0-6]中的一個(gè)數(shù)字，0代表星期天，1代表星期一，2代表星期二，以此類推。所以如果一個(gè)月的1號(hào)是星期五的話，那么剛好左邊需要5個(gè)空表格代替。然后，假如一個(gè)月有31天，最后求出的表格行數(shù)就是：
var tr_nums = Math.ceil((5 + 31)/7);
當(dāng)然，并不是每個(gè)月都是31天，所以我們得創(chuàng)建一個(gè)包含12個(gè)月份的數(shù)組，每個(gè)元素代表每個(gè)月份所包含的天數(shù)。但是2月份比較特殊，閏年的2月份有29天，平年的2月份只有28天。所以，在創(chuàng)建數(shù)組之前，得自己創(chuàng)建一個(gè)判斷閏年的函數(shù):
//如果當(dāng)前年份能被4整除但是不能被100整除或者能被400整除，即可確定為閏年，返回1，否則返回0
function isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
}
然后我們創(chuàng)建一個(gè)月份數(shù)組:
var days_per_month = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
這樣就能保證無論是平年還是閏年都會(huì)取出正確的天數(shù)，下面的代碼用于獲取今天的相關(guān)信息:
var today = new Date(), //獲取當(dāng)前日期
y = today.getFullYear(), //獲取日期中的年份
m = today.getMonth(), //獲取日期中的月份(需要注意的是：月份是從0開始計(jì)算，獲取的值比正常月份的值少1)
d = today.getDate(), //獲取日期中的日(方便在建立日期表格時(shí)高亮顯示當(dāng)天)
firstday = new Date(y, m, 1), //獲取當(dāng)月的第一天
dayOfWeek = firstday.getDay(), //判斷第一天是星期幾(返回[0-6]中的一個(gè)，0代表星期天，1代表星期一，以此類推)
days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //創(chuàng)建月份數(shù)組
所以最后就可以獲取當(dāng)月所需表格的行數(shù):
var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //確定日期表格所需的行數(shù)
二.打印日歷表格
表格本身是一個(gè)二維數(shù)組，所以讓for大師出來跑兩個(gè)循環(huán)就搞定啦，代碼如下:
for (i = 0; i < str_nums; i += 1) { //第一層for循環(huán)創(chuàng)建tr標(biāo)簽
document.write('<tr>');
for (k = 0; k < 7; k++) { //第二層for循環(huán)創(chuàng)建td標(biāo)簽
var idx = 7 * i + k; //為每個(gè)表格創(chuàng)建索引,從0開始
var date = idx - dayOfWeek + 1; //將當(dāng)月的1號(hào)與星期進(jìn)行匹配
//do something else
}
document.write('</tr>');
}
三.附上完整的js日歷代碼
<script>
//判斷當(dāng)前年份是否是閏年(閏年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(), //獲取當(dāng)前日期
y = today.getFullYear(), //獲取日期中的年份
m = today.getMonth(), //獲取日期中的月份(需要注意的是：月份是從0開始計(jì)算，獲取的值比正常月份的值少1)
d = today.getDate(), //獲取日期中的日(方便在建立日期表格時(shí)高亮顯示當(dāng)天)
firstday = new Date(y, m, 1), //獲取當(dāng)月的第一天
dayOfWeek = firstday.getDay(), //判斷第一天是星期幾(返回[0-6]中的一個(gè)，0代表星期天，1代表星期一，以此類推)
days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //創(chuàng)建月份數(shù)組
str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //確定日期表格所需的行數(shù)
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) { //二維數(shù)組創(chuàng)建日期表格
document.write('<tr>');
for (k = 0; k < 7; k++) {
var idx = 7 * i + k; //為每個(gè)表格創(chuàng)建索引,從0開始
var date = idx - dayOfWeek + 1; //將當(dāng)月的1號(hào)與星期進(jìn)行匹配
(date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1; //索引小于等于0或者大于月份最大值就用空表格代替
date == d ? document.write('<td>' + date + '</td>') : document.write('<td>' + date + '</td>'); //高亮顯示當(dāng)天
}
document.write('</tr>');
}
document.write('</table>');
</script>
css部分大家就自由發(fā)揮吧，當(dāng)前時(shí)間是2016年5月2號(hào)，效果圖如下:
以上這篇js編寫當(dāng)天簡(jiǎn)單日歷效果【實(shí)現(xiàn)代碼】就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考