用 javascript 作一個簡單的萬年曆。
- 範例說明：
- 這個簡單的萬年曆使用 TABLE 元素來佈局，TABLE 被分成七列，由星期日到星期六。TABLE 的第一欄包含年月，及 << 與 >>；後面這兩項設了 ONCLICK 事件操控函式，可用滑鼠點擊，達到增減月份的功能。星期日這一列使用 COL 元素設定紅色的背景。今天則用藍色與粗體字。
- DIV 元素用來容納萬年曆，這是因為 IE 不能在 TABLE 元件中用 innerHTML。
- 此例使用 風格表 設定萬年曆的顏色與邊線等等。
- 例中還使用 Date 物件。getDay() 方法可讀取星期的天數。getMonth() 方法被用來檢查是否超出指定的月份。toString() 用在檢查是否為今天。
- 程式用法：
<style type='text/css'>
.cal {border-collapse:collapse}
.cal TH {background:blue;
border:solid 1px green;
text-align:center
}
.cal TD {border:solid 1px green;
text-align:right
}
.cal COL {background:red}
</style>
<div id=calendar></div>
<script type='text/javascript'>
function drawCal(inc)
{
month+=inc;
if(month == 0 )
{
month=12;
year--;
}
else if( month == 13 )
{
month=1;
year++;
}
calendar(year, month);
}
function calendar(yr, mth)
{
var td=new Date();
var today=new Date( td.getFullYear(), td.getMonth(), td.getDate());
var s='<table class=cal><col>';
s+='<tr><th onclick="drawCal(-1)"><<<th colspan=5>'
+yr +'年'+ mth +'月<th onclick="drawCal(1)">>>';
mth--;
s+='<tr><th>日<th>一<th>二<th>三<th>四<th>五<th>六';
var dt=new Date(yr, mth, 1);
var wd=dt.getDay(); //week day
var i;
s+='<tr>';
for( ; wd > 0 ; wd--) s+='<td>';
for( i=1; i<32; )
{
dt=new Date(yr, mth, i);
if( dt.toString() == today.toString() )
s+='<td style="color:blue; font-weight:bolder">'+i;
else
s+='<td>'+i;
dt=new Date(yr, mth, ++i);
if( dt.getMonth() != mth ) break;
wd=dt.getDay();
if( wd == 0 )
s+='<tr>';
}
for( ; wd < 6; wd++) s+='<td>';
s+='</table>';
document.getElementById('calendar').innerHTML=s;
}
var td=new Date();
var year=td.getFullYear();
var month=td.getMonth()+1;
calendar(year, month);
</script> - 執行結果：
<< 2025年4月 >> 日 一 二 三 四 五 六 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
