用一個函數簡單的實現一個月份的日歷，效果如下：
這個日歷效果有高亮顯示，我實現的思維比較簡單。
我把上面的日歷效果用表格table生成，分成兩個部分。
第一個部分：就是前面的第一排，我用一行<tr></tr>顯示，這一部分表示的上個月份留下來的日期和這個月份的日期的混合日期；
第二部分：就是剩下的所有排，這里我用五行<tr></tr>顯示，這一部分表示的是這個月份和下個月份的日期的混合日期。
這里為什么要用6行<tr></tr>來顯示日歷的效果呢？原因是有的月份跨越了6行，所以為了兼容所有的月份，只好用6行了。
下面是代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>js的日歷</title> <meta name="keywords" content="關鍵字列表" /> <meta name="description" content="網頁描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> table tr td { width:27px; text-align:center; } </style> <script type="text/javascript"> (function(){ //獲取日歷的函數，參數是年份year和月份Month，默認是今年當月的日歷 function getcalendar(year,month){ year = year ? year : new Date().getFullYear(); //month是0開始到11結束的，獲取當前月份必須加1 month = month ? month : new Date().getMonth()+1; var last = new Date(year,month-1,0); var lastdate = last.getDate();//獲取上個月的最大日期 var lastday = last.getDay();//獲取上個月最大日期的星期幾 var months = new Date(year,month,0); var Maxdate = months.getDate();//獲取這個月最大的日期 //獲取當前的日期，為的是高亮顯示當前的日期 var today = new Date().getDate(); var thisyear = new Date().getFullYear(); var thismonth = new Date().getMonth()+1; var str = '<table><tr style="font-size:21px;font-weight:bold;"><td id="dec">\<</td> <td colspan="5">'+year+'年'+month+'月</td><td id="add">\></td></tr><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>'; //獲取上個月在這個月份中存在的最后日期 var remainlastdate = lastdate - lastday; var t = 1; str += '<tr>'; for(var g=0;g<=6;g++){ //星期是從0開始到6結束的，小於等於上個月最大星期的日期則是上個月的日期 if(g <= lastday){ str +='<td>'+ remainlastdate++ +'</td>'; }else{ //高亮顯示當前日期 if(thisyear == year && thismonth == month && today == t){ str +='<td style="color:red;">'+ t++ +'</td>'; //假如不是當前月份則默認1為高亮日期 }else if((thisyear != year && t == 1) || (thismonth != month && t == 1)){ str +='<td style="color:red;">'+ t++ +'</td>'; }else{ //該月份的普通日期 str +='<td style="color:blue;">'+ t++ +'</td>'; } } } str += '</tr>'; //除去上面的部分，這個月從哪里開始 var remainlastday = 6 - lastday + 1; var nextMonthday = 1;//下一個月份的開始日期 //這里i最大值為5是為了兼容所有的月份，有的月份可能跨越6個tr for(var i=1;i<=5;i++){ str += '<tr>'; for(var j=0;j<7;j++){ if(remainlastday <= Maxdate){ if(thisyear == year && thismonth == month && today == remainlastday){ str +='<td style="color:red;">'+ remainlastday++ +'</td>'; }else{ if((thisyear != year && remainlastday == 1) || (thismonth != month && remainlastday == 1)){ //剩下的天數從這里開始的話，默認的第一天還是為紅色 str +='<td style="color:red;">'+ remainlastday++ +'</td>'; }else{ str +='<td style="color:blue;">'+ remainlastday++ +'</td>'; } } }else{ str +='<td>'+ nextMonthday++ +'</td>'; } } str += '</tr>'; } str +='</table>'; return str; } return window.calendar=getcalendar; })(); document.write(calendar(2018,1)); </script> </head> <body> <div id='di'></div> </body> </html>
上面的函數簡單的實現了日歷，當然，要想讓這個日歷變得更強大，更有意思，你還得自己動手修改一下上面的函數。
有什么bug還望讀者指出。