收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 4157|回复: 4

[原创]简单JavaScript日历及说明

[复制链接]
发表于 2009-9-17 21:18:10 | 显示全部楼层 |阅读模式

 提示:您可以先修改部分代码再运行



[程序说明]主要为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()方法的思维,只要了解了主要的部分.输入日期的方法可以有很多.
改程序还有许多需要改进的地方,希望大家给点意见.~`尤其是在代码里面,有哪些地方需要注意的,本人写的代码不太多,所以希望各位给与批评,然后我能发现错误进行改正.
发表于 2009-9-17 22:27:10 | 显示全部楼层
先收下,慢慢学习。谢谢了
回复 支持 反对

使用道具 举报

发表于 2009-9-17 23:04:28 | 显示全部楼层
以前也写过一个类似的:http://www.wxwdesign.cn/article/works/javascript_calendar.htm


 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-10-16 10:50:48 | 显示全部楼层
比较复杂,慢慢学习,以后应该会用到
回复 支持 反对

使用道具 举报

发表于 2009-10-18 20:40:24 | 显示全部楼层
支持楼主!!学习JavaScript
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-11-1 00:33 , Processed in 0.109099 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表