简单JavaScript日历及详细说明
49 浏览量
2020-10-29
00:02:01
上传
评论
收藏 62KB PDF 举报
简单简单JavaScript日历及详细说明日历及详细说明
HTML和CSS样式可以自行修改,但是整体不做太大改变的情况下.直接待用calendar类,并且使用init方法,把日历
HTML的id调入即可
效果图:
测试代码:
<meta http-
equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>calendar2</title>
<style type="text/css">
#calendar{
background:#000;
color:#FFF;
font-size:0.8em;
}
#tittle{
font-size:1.4em;
padding:4px 0.55em;
}
#days th {
font-weight:bold;
text-align:center;
padding:4px 0.55em;
}
#calendar td{
text-align:center;
padding:4px 0.55em;
}
#today{
color:#F00;
font-weight:bold;
}
</style>
<script
type="text/javascript">
var calendar = {
dayTable:null, //初始化
TABLE
year:null, //初始化年
month:null, //初始化月份
getFirstDay:function(year
,month){ //获取每个月第
一天再星期几
var firstDay = new
Date(year,month,1);
return firstDay.getDay();
//getDay()方法来获取
},
getMonthLen:function(ye
ar,month){ //获取当月总
共有多少天
var nextMonth = new
Date(year,month+1,1); //
获取下个月的第一天
nextMonth.setHours(next
Month.getHours() - 3); //
由于获取的天是0时,所以
减去3小时则可以得出该
月的天数
return
nextMonth.getDate(); //返
运行代码
复制代码
保存代码
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
[程序说明]主要为calendar类,里面的方法说明有:
getFirstDay:获取每个月第一天再星期几
getMonthLen:获取当月总共有多少天
createCalendar:创建日历方法
clearCalendar:清空TABLE方法
init:运行方法
[方法介绍]
getFirstDay中主要用了new Date()的getDay()方法,该方法是用于获取日期所在星期几.
但有一个特别需要注意的地方,就是getDay()方法所获取的星期数如下:
星期日为0,星期一为1,星期二为2,星期三为3,星期四为4,星期五为5,星期六为6
getMonthLen方法用于获取当月的天数,也就是目标为获取当月最后一天的日期即可.
所以思维是获取下个月第一天的0时,然后减去3个小时就可以得到当月天数.
nextMonth.setHours(nextMonth.getHours() - 3);
减去3小时的原因参考<<DHTML Cookbook>>是这样说的:三个小时的修正用于处理在月份中包含了夏季时间到冬季时间的转
换时发生的日期计算的异常现象.
但这解释我也不太理解,所以就直接按照巨人的做法做了,若果有人知道该异常现象是怎么回事,可以告诉我.
而该方法主要用了Date的setHours()和getDate()方法,分别用于获得小时数和天数.
createCalendar创建日历的方法,由于我自身本来写好了HTML代码,所以不直接用DOM来生成,这里主要是写入日期数.
写入日期的主要过程为:
for(var i = 1;i <= monthLen;i++){
calendar.dayTable[i+firstDay-1].innerHTML = i;
}
monthLen为getMonthLen()方法所获取的当月长度,循环过程不应该超过该长度.
firstDay则由getFirstDay()方法获得第一天的星期值,只要i+firstDay就可以得到开始第一天所在日历单元格的位置,但由于数组从
0开始,所以另外减去1.
在for循环插入值的过程中并判断今天的日期,并为今天加入一个特别的id="today",代码如下:
if((i+firstDay-2) == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new
Date().getFullYear()){
calendar.dayTable[i+firstDay-1].id = 'today';
}
clearCalendar方法则用来每次换月的过程中,清空日历,主要由for循环执行,过程比较简单,所以不多详细介绍.
另外特别说明2个单击事件,都是换月作用,其中为向前一个月和向后一个月:
preMon.onclick = function(){
calendar.createCalendar(form,new Date(calendar.year,calendar.month-1,1));
}
nextMon.onclick = function(){
calendar.createCalendar(form,new Date(calendar.year,calendar.month+1,1));
}
由于把整体的year和month设置为calendar的属性,所以只需在过程中对其月份进行加减即可.
其中由于在onclick事件中,所以this分别指向preMon和nextMon,所以在内部不使用this,直接使用calendar.在createCalendar不
使用this也是这个原因.
[使用说明]
HTML和CSS样式可以自行修改,但是整体不做太大改变的情况下.直接待用calendar类,并且使用init方法,把日历HTML的id调入
即可,如下:
calendar.init(calendars);
在整个过程中,需要注意的就是getFirstDay()和getMonthLen()方法的思维,只要了解了主要的部分.输入日期的方法可以有很多.
改程序还有许多需要改进的地方,希望大家给点意见.~`尤其是在代码里面,有哪些地方需要注意的,本人写的代码不太多,所以希
望各位给与批评,然后我能发现错误进行改正.
评论0
最新资源