简单JavaScript日历及详细说明

网络编程 JavaScript 网页特效 时间日期 分类:[default] 更新日期: 2015-07-10
HTML和CSS样式可以自行修改,但是整体不做太大改变的情况下.直接待用calendar类,并且使用init方法,把日历HTML的id调入即可
效果图:
简单JavaScript日历及详细说明

测试代码:

如需引入外部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循环插入值的过程中并判断今天的日期,并为今天加入一个特别的,代码如下:
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()方法的思维,只要了解了主要的部分.输入日期的方法可以有很多.
改程序还有许多需要改进的地方,希望大家给点意见.~`尤其是在代码里面,有哪些地方需要注意的,本人写的代码不太多,所以希望各位给与批评,然后我能发现错误进行改正.

> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • JavaScript中的正则表达式(推荐)
    正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式推荐,感兴趣的朋友一起学习吧正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词 ...
  • asp.net及javascript判断是否手机访问的方法
    这篇文章主要介绍了asp.net及javascript判断是否手机访问的方法,结合实例形式对比分析了asp.net及javascript实现判断访问端类型的相关技巧,需要的朋友可以参考下本文实例讲述了asp.net及javascript判断是否手机访问的方法.分享给大家供大家参考,具体如下: /// <summary> /// 判断手机用户Use ...
  • 将xml文件作为一个小的数据库,进行学生的增删改查的简单实例
    下面小编就为大家带来一篇将xml文件作为一个小的数据库,进行学生的增删改查的简单实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧1.xml文件: <?xml version="1.0" encoding="UTF-8"?><Students> <stude ...
  • jsp输出九九乘法表的简单实例
    jsp输出九九乘法表的简单实例
    下面小编就为大家带来一篇jsp输出九九乘法表的简单实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 <% String st = ""; for(int i = 1; i <= 9; i++){ for(int j = 1; j <= i; j++){ st += j+"x&q ...
  • 简单谈谈GET和POST有什么区别
    本文给大家总结了下get与post的具体区别,以及网上的那么多答案为什么都是错误的,非常的实用,这里推荐给大家如果有人问你,GET和POST,有什么区别?你会如何回答? 真实案例      前几天有人问我这个问题.我说GET是用于获取数据的,POST,一般用于将数据发给服务器之用.     这个答案好像并不是他想要的.于是他继续追问有没有别的区别?我说这就是 ...
  • gVim,gVimEasy,gVimRead-only的简单区别
    今天打算好好学习一下python,买了一本书看了介绍无语了,gVim, gVim Diff, gVim Easy, gVim Read-only 的简单区别,需要的朋友可以参考下我在Window XP中安装了Gvim7.2,然后桌面上出现了三个快捷方式,gvim72.exe,gvim read-only,gvim easy,大家谁比较熟悉介绍一下啊,谢谢了! ...
猜你喜欢