HTML+JavaScript自己动手做日历

当我们需要在页面中显示某月的事项，或是选择某一段日期时，常常要使用到日历组件。这一组件同样有着许多现成的类库，然而亲自动手开发一个日历，从中了解其实现原理也是非常必要的。在本例中我们就将制作一款非常经典的日历组件。

本例的HTML代码如下：

由以上代码可见，日历的最外层是一个类名为calendar的div元素，其内部包含了两大部分，分别是日历顶部的标题区域，其类名为title，以及其下方的日期区域，其类名为body。

在title中包含了当前所选日期的月份、年份，其id分别为calendar-title和calendar-year，此外该元素还包括了prev和next两个按钮，分别用于切换选择上一月和下一月。

在body中首先包含了一个周一到周日的英文表头，它们放在一个ul元素中。在表头之后是另一个div元素，用于显示日历主体。其中，日历所选月份的每一天都将显示在该元素内部的days列表中。

本例中大部分的基础CSS样式省略介绍，在此仅介绍其中的body-list类。该类用于设置日历表头和日期数据的栅格显示。我们将整个ul元素的宽度设置为100%，并将其除以7，就可以得到每一个li元素的宽度，即14.28%，将这些元素左浮动显示，就可以得到日期的7列显示，样式代码如下：

此外，我们为今天、今天之前及今天之后的日期分别创建了不同的类。其中，用浅灰色来显示过去的日期，深灰色来显示将来的日期，日期当天则使用浅绿色背景、绿色文字加以显示，样式代码如下：

日历组件的初始显示效果如下图所示。

接着使用JavaScript来动态生成日历信息。首先，我们要做一些前期的准备工作。由于闰年和非闰年的二月天数是不一样的，在此我们为这两种年份分别创建数组，以便于获取每个月的天数，同时为每个月份的英文名创建相应的数组变量，代码如下：

然后，为页面中的各种元素创建变量，以便于后续的引用，代码如下：

创建一个Date对象来获取当前的日期时间，并通过getFullYear()方法来获取当前年份，getMonth()方法来获取月份，getDate()方法来获取当前日期。代码如下：

我们要实现日历的排布，最关键的问题是要知道某一月第一天究竟是星期几，然后才可以根据当月的天数来依次排列其后的日期。在此，专门为该功能创建一个函数，代码如下：

此外，我们也创建一个相应的函数来获取某月的总天数，代码如下：

然后，创建一个refreshDate函数来生成月份显示，代码如下：