螞蟻的 JavaScript: 萬年曆

2009年1月30日

萬年曆

用 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>