返回課程

建立行事曆

重要性:4

撰寫函式 createCalendar(elem, year, month)

呼叫應為指定年份/月份建立行事曆,並將其置於 elem 內。

行事曆應為表格,其中一週為 <tr>,一天為 <td>。表格頂端應為 <th>,包含星期名稱:第一天應為星期一,以此類推至星期日。

例如,createCalendar(cal, 2012, 9) 應在元素 cal 中產生以下行事曆

附註:對於此任務,產生行事曆就已足夠,不應可按。

為此任務開啟沙盒。

我們將以字串建立表格:"<table>...</table>",然後將其指定給 innerHTML

演算法

  1. 使用 <th> 和星期名稱建立表格標題。
  2. 建立日期物件 d = new Date(year, month-1)。這是 month 的第一天(考量到 JavaScript 中的月份從 0 開始,而非 1)。
  3. 直到月份的第一天 d.getDay() 之前的幾個儲存格可能會是空的。我們使用 <td></td> 填入這些儲存格。
  4. 增加 d 中的天數:d.setDate(d.getDate()+1)。如果 d.getMonth() 尚未到下個月,則將新的儲存格 <td> 加入行事曆。如果這是星期日,則加入新行 “</tr><tr>”
  5. 如果月份已結束,但表格列尚未填滿,則加入空的 <td>,以使其為正方形。

在沙盒中開啟解決方案。