JavaScript做一个日历
JavaScript做一个日历
看了百页的书，是时候搞点小例子了，发现：看书需要，但是例子更重要，实际的东西，以后得多练习了，做完一个东西才会对所看的东西掌握更深一层。
日历
比较戳的，先试着来个简单版的。做完这个，会发现对JS中之前的那个Date对象中的一些东西了解的更深，再此再次回顾归纳一下：
|
getTime() |
返回日期的毫秒表示 |
|
getFullYear() |
返回用四位数字表示的日期的年份（如2004而不只是04） |
|
getMonth() |
返回日期的月份值，由数字0（1月）到11（12月）表示 |
|
getDate() |
返回该日期该月中的某天，由数字1到31表示 |
|
getDay() |
返回该日期为星期几，由数字0到6表示 |
|
getHours() |
返回日期中的小时值，由数字0到23表示 |
|
getMinutes() |
返回日期中的分钟值，由数字0到59表示 |
|
getSeconds() |
返回日期中的秒值，由数字0到59表示 |
|
getMilliseconds() |
返回日期中的毫秒值。注意:这不是自1970年1月1日以后的毫秒值，而是当前时间中的毫秒值，例如4 :55 :34.20，其中20即为时间的毫秒值，由数字0到999表示 |
注意：每一个方法的范围。
其中特别注意getDay值对应的星期：
0 星期天
1 星期一
2 星期二
3 星期三
4 星期四
5 星期五
6 星期六
以上表格的属性中带有UTC的是全球标准时间对应的值。
|
getUTCFullYear() |
返回用四位数字表示的UTC日期的年份 |
其他方法带UTC类似。
另外方法还有：
toLocaleString () 方法返回一个日期，该日期使用当前区域设置并已被转换为字符串。
getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
猜猜下面会输出什么？
var myDate = new Date(2009, 12, 32);
alert(myDate.toLocaleString());
//答案是：2010年2月1日 0:00:00 （因为月：只有0到11，日：只有1到31）
在开始之前还有下面是几个比较有技巧的地方：
首先，做日历控件时需要知道该月第一天离星期天的天数，参照getDay对应值，发现这刚好等于该月第一天的getDay值，所以可以这样获得：
new Date(this.year, this.month - 1, 1).getDay()
另外，还有是获取该月的天数，通过获取该月最后一天的getDate值就可以得到该月的天数，但怎么获取该月最后一天。这里有一个方法，当获取指定年月日的日期时，设置下个月的日参数为0，就可以获取上一个月的最后一天，所以可以这样获取该月的天数：
new Date(this.year, this.month, 0).getDate()
如果不用这种方法的话，可以另外弄个数组来存放12个月的每一个月的天数，其中2月份的天数要计算过，判断得到的year是否是闰年。
以上的month为 new Date().getMonth() + 1; //本月，月份值由数字0（1月）到11（12月）表示
正式开工
先前面做出大概框架
前面代码：
<table id="Calendar" width="212">
<tr>
<td height="21" bgcolor="#78b3ed" width="212">
<table id="LHeader" height="21" width="212">
<tbody>
<tr align="center">
<td align="center" width="21"><</td>
<td align="center">
<span id="showDate">2010.01</span>
</td>
<td align="center" width="21">></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="18">
<table id="LDay" bgcolor="#e7f1fd">
<tbody>
<tr>
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="120" width="212" id="Container">
</td>
</tr>
</table>
<input id="Button1" type="button" value="生成日历" onclick="calendar();" />
CSS：
<style type="text/css">
#Header /*标题样式*/
{
height: 21px;
font-family: "宋体";
font-size: 12px;
}
#LDay td /*星期的单元格样式*/
{
width: 30px;
height: 30px;
text-align: center;
font-family: "宋体";
font-size: 12px;
}
#LBody td /*日期的单元格样式*/
{
width: 30px;
height: 30px;
text-align: center;
font-family: "宋体";
font-size: 12px;
color: #999;
font-weight: bold;
}
</style>
JS代码：
<script type="text/javascript">
//实现日历
function calendar() {
var today = new Date();
var year = today.getFullYear(); //本年
var month = today.getMonth() + 1; //本月
var day = today.getDate(); //本日
//本月第一天是星期几（距星期日离开的天数）
var startDay = new Date(year, month - 1, 1).getDay();
//本月有多少天(即最后一天的getDate()，但是最后一天不知道，我们可以用“上个月的0来表示本月的最后一天”)
var nDays = new Date(year, month, 0).getDate();
//开始画日历
var numRow = 0; //记录行的个数，到达7的时候创建tr
var i; //日期
var html = '';
html += '<table id="Body" width="212"><tbody>';
//第一行
html += '<tr>';
for (i = 0; i < startDay; i++) {
html += '<td></td>';
numRow++;
}
for (var j = 1; j <= nDays; j++) {
//如果是今天则显示红色
if (j == day) {
html += '<td style="color:red" onclick="' + "alert('今天是" + j + "号');" + '">';
html += j; //开始加日期
}
else {
html += '<td onclick="' + "alert('你点的是" + j + "号');" + '">';
html += j; //开始加日期
}
html += '</td>';
numRow++;
if (numRow == 7) { //如果已经到一行（一周）了，重新创建tr
numRow = 0;
html += '</tr><tr>';
}
}
html += '</tbody></table>';
document.getElementById("Container").innerHTML = html;
}
</script>
运行后的效果：
想扩展的话，在表头的“<”、“>”添加点击事件显示上一个月和下一个月，然后再展示该月的日历。生成日历的方法接收一个年月日的Date对象就OK了。
