HTML+JavaScript自己动手做日历

1、html+javascript自己动手做日历html+javascript自己动手做日历当我们需要在页面中显示某月的事项，或是挑选某一段日期时，经常要用法到日历组件。这一组件同样有着许多现成的类库，然而亲手动手开发一个日历，从中了解其实现原理也是十分须要的。在本例中我们就将制作一款十分经典的日历组件。1. 创建dom代码本例的html代码如下： month year prev month next month mon tue wed thu fri sat sun 由以上代码可见，日历的最外层是一个类名为calendar的div元素，其内部包含了两大部分，分离是日历顶部的标题区域，其类名为ti

2、tle，以及其下方的日期区域，其类名为body。在title中包含了当前所选日期的月份、年份，其id分离为calendar-title和calendar-year，此外该元素还包括了prev和next两个按钮，分离用于切换挑选上一月和下一月。在body中首先包含了一个周一到周日的英文表头，它们放在一个ul元素中。在表头之后是另一个div元素，用于显示日历主体。其中，日历所选月份的每一天都将显示在该元素内部的days列表中。2. css样式本例中大部分的基础css样式省略介绍，在此仅介绍其中的body-list类。该类用于设置日历表头和日期数据的栅格显示。我们将囫囵ul元素的宽度设置为100%，

3、并将其除以7，就可以得到每一个li元素的宽度，即14.28%，将这些元素左浮动显示，就可以得到日期的7列显示，样式代码如下：.calendar width:450px; height:350px; background:fff; box-shadow:0px 1px 1px rgba(0,0,0,0.1); .body-list ul width:100%; font-family:arial; font-weight:bold; font-size:14px; .body-list ul li width:14.28%; height:36px; line-height:36px; list

4、-style-type:none; display:block; box-sizing:border-box; float:left; text-align:center; 此外，我们为今日、今日之前及今日之后的日期分离创建了不同的类。其中，用浅灰色来显示过去的日期，深灰色来显示未来的日期，日期当天则用法浅绿色背景、绿色文字加以显示，样式代码如下：.lightgrey color:a8a8a8; /*浅灰色*/ .darkgrey color:565656; /*深灰色*/ .green color:6ac13c; /*绿色*/ .greenbox border:1px solid 6ac13

5、c; background:e9f8df; /*浅绿色背景*/ 日历组件的初始显示效果如下图所示。3. javascript生成日历接着用法javascript来动态生成日历信息。首先，我们要做一些前期的预备工作。因为闰年和非闰年的二月天数是不一样的，在此我们为这两种年份分离创建数组，以便于猎取每个月的天数，同时为每个月份的英文名创建相应的数组变量，代码如下：var month_olympic = 31,29,31,30,31,30,31,31,30,31,30,31;var month_normal = 31,28,31,30,31,30,31,31,30,31,30,31;var mont

6、h_name = "january","febrary","march","april","may","june","july","auguest","september","october","november&

7、quot;,"december"然后，为页面中的各种元素创建变量，以便于后续的引用，代码如下：var holder = document.getelementbyid("days");var prev = document.getelementbyid("prev");var next = document.getelementbyid("next");var ctitle = document.getelementbyid("cal

8、endar-title");var cyear = document.getelementbyid("calendar-year");创建一个date对象来猎取当前的日期时光，并通过getfullyear()办法来猎取当前年份，getmonth()办法来猎取月份，getdate()办法来猎取当前日期。代码如下：var my_date = new date();var my_year = my_date.getfullyear();var my_month = my_date.getmonth();var my_day = my_date.g

9、etdate();我们要实现日历的排布，最关键的问题是要知道某一月第一天毕竟是星期几，然后才可以按照当月的天数来依次罗列其后的日期。在此，特地为该功能创建一个函数，代码如下：/猎取某年某月第一天是星期几function daystart(month, year) var tmpdate = new date(year, month, 1); return (tmpdate.getday(); 此外，我们也创建一个相应的函数来猎取某月的总天数，代码如下：/计算某年是不是闰年，通过求年份除以4的余数即可function daysmonth(month, year) var tmp = year %

10、 4; if (tmp = 0) return (month_olympicmonth); else return (month_normalmonth); 然后，创建一个refreshdate函数来生成月份显示，代码如下：function refreshdate() var str = "" var totalday = daysmonth(my_month, my_year); /猎取该月总天数 var firstday = daystart(my_month, my_year); /猎取该月第一天是星期几 var myclass; for(var i=

11、1; i" /为起始日之前的日期创建空白节点 for(var i=1; i"+i+"" /创建日期节点 holder.innerhtml = str; /设置日期显示 ctitle.innerhtml = month_namemy_month; /设置英文月份显示 cyear.innerhtml = my_year; /设置年份显示 refreshdate(); /执行该函数测试页面，日历显示效果如下图所示。4. 添加交互动作最后，我们为prev和next元素分离创建onclick大事函数，使得每点击一次prev，则将当前月份减去1，并调用refreshdate函数刷新日历显示。当月份数值小于0时，则使年份减去1，并使月份变为11，使日历显示为前一