回到课程

创建一个日历

重要程度: 4

编写一个函数 createCalendar(elem, year, month)

对该函数的调用,应该使用给定的 year/month 创建一个日历,并将创建的日历放入 elem 中。

创建的日历应该是一个表格(table),其中每一周用 <tr> 表示,每一天用 <td> 表示。表格顶部应该是带有星期名的 <th>:第一天应该是 Monday,依此类推,直到 Sunday。

例如,createCalendar(cal, 2012, 9) 应该在元素 cal 中生成如下所示的日历:

P.S. 在这个任务中,生成一个日历就可以了,不需要有点击交互的功能。

打开一个任务沙箱。

我们将表格创建为字符串:"<table>...</table>",然后将其赋值给 innerHTML

算法如下:

  1. 使用 <th> 创建带有星期名的表头。
  2. 创建日期对象 d = new Date(year, month-1)。它是 month 的第一天(考虑到 JavaScript 中的月份从 0 开始,而不是从 1 开始)。
  3. 直到月份的第一天 d.getDay(),前面的几个单元格是空的。让我们用 <td></td> 填充它们。
  4. 天数增长 dd.setDate(d.getDate()+1)。如果 d.getMonth() 还没到下一个月,那么就将新的单元格 <td> 添加到日历中。如果那天是星期日,就添加一个新行 “</tr><tr>”
  5. 如果该月结束,但表格的行尚未填满,就用空的 <td> 补齐。

使用沙箱打开解决方案。