猛火网(LieHuo.Net)教程 JavaScript建造的简朴日历(附详解)
[措施声名]首要为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()要领的思想,只要相识了首要的部门.输入日期的要领可以有许多. 改措施尚有很多必要改造的处所,但愿各人给点意见.~`尤其是在代码内里,有哪些处所必要留意的,本人写的代码不太多,以是但愿列位给与品评,然后我能发明错误举办纠正.
提醒:可修改儿女码再运行! (编辑:湖南网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|