
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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,使日历显示为前一
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年淮南三和镇城市社区专职网格员招聘真题
- 社区物业管理基础知识点归纳
- 历史建筑群标识系统规划基础知识点归纳
- 南通如东县公安局招聘警务辅助人员笔试真题2024
- 石大学前儿童保育学课件6-6托儿所幼儿园卫生保健管理办法实施细则
- 2025年金属切割相关知识试题
- 青岛版五四制五年级下册《科学》期末试题及答案
- 混合云安全治理框架-洞察阐释
- 项目实施中的资源共享与协同合作模式设计
- 南岗河幸福河湖综合提升工程可行性研究报告
- 国开作业《公共关系学》实训项目3:社区关系建设(六选一)-实训项目二社区关系建设方案-参考(含答案)98
- 千喜鹤培训手册终版
- 《历史文化名城名镇名村保护规划编制要求》
- 申请人申请仲裁送达信息确认书
- (完整版)生物同源性荷尔蒙替代疗法课件
- 福建跨学科四门主干课程作业及答案小学语文
- (高清正版)JJF 1908-2021 双金属温度计校准规范
- 硬式内窥镜项目计划书_模板范本
- 房屋建筑工程安全防护指导图集(防高坠篇)
- 皮内注射--ppt课件
- 机械原理课程设计半自动钻床郭
评论
0/150
提交评论