javascript 创建日历 javascript编写日历

转载

jordana 2023-07-31 23:39:37

文章标签 javascript 创建日历 javascript ViewUI html css 文章分类 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 日之间的毫秒数。

猜猜下面会输出什么？

varnew

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//本月，月份值由数字0（1月）到11（12月）表示

正式开工

先前面做出大概框架

javascript 创建日历 javascript编写日历_html

前面代码：

<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>
<inputid="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代码：

<scripttype="text/javascript">
//实现日历
function
var today = new

 
var year = today.getFullYear();      //本年
var month = today.getMonth() + 1;    //本月
var day = today.getDate();           //本日

 
//本月第一天是星期几（距星期日离开的天数）
var startDay = new

 
//本月有多少天(即最后一天的getDate()，但是最后一天不知道，我们可以用“上个月的0来表示本月的最后一天”)
var nDays = new

 
//开始画日历
var numRow = 0;  //记录行的个数，到达7的时候创建tr
var i;        //日期
var html = '';
'<table id="Body" width="212"><tbody>';
//第一行
'<tr>';
for
'<td></td>';
            numRow++;
        }
for (var
//如果是今天则显示红色
if
'<td style="color:red" οnclick="' + "alert('今天是""号');"'">';
//开始加日期
            }
else
'<td οnclick="' + "alert('你点的是""号');"'">';
//开始加日期
            }
'</td>';
            numRow++;
if (numRow == 7) {  //如果已经到一行（一周）了，重新创建tr
                numRow = 0;
'</tr><tr>';
            }
        }

 
'</tbody></table>';
"Container").innerHTML = html;
    }
</script>

运行后的效果：