JavaScript实现万年历

网络应用技术报告 1 网络应用技术网络应用技术 网页设计报告 所选题目 设计一个多功能网站 包含数学计算器 万年历 设计部分 用 JavaScript 实现万年历 此次网络应用技术网络应用技术上机实践作业 我们小组选择的题目是设计 一个多功能网站 包含数学计算器 万年历 组内进行了分工 我 们两个人主要负责的是万年历的部分 在后期还参与了一些网站的 完善美化工作 由于在软件工程与应用软件工程与应用课程中 我们曾经学过一部分 Java 程序 设计语言 并接触到了 JavaScript 因此我们决定采用 JavaScript 来实 现万年历 在编写代码的过程中查阅了很多资料 并得到了班内一 些同学的帮助 其间遇到过很多困难我们都一一克服了 通过这次 实践 我们对网页的设计以及网站功能的实现有了更深的理解 需求分析需求分析 最开始我们进行的是需求分析工作 讨论万年历中可能实现的 功能 以及实现这些功能的可行性 首先必须要实现的功能 也是万年历的核心功能就是日历的查 询 因为是万年历 所以其中不仅仅要包含当前月份的日历 还应 包括其他年份月份的日历 这也就意味着我们不能采用存储的方法 来实现这一功能 而需采用一定的算法即时计算并显示出所查询日 网络应用技术报告 2 期所在月份的日历 除了这一核心功能外 我们之前还考虑过实现农历的显示和查 询 但由于农历的特殊性 致使我们无法找出一套合适的算法来计 算除年份 天干地支 生肖 与地支对应 以外的部分 我们查阅 了各种资料 其中很少有涉及这方面的内容 唯一提到农历的一本 书 所用的方法是用存储的办法存入前后几年的农历日期 这一点 较易实现 因为除去闰月外 其他部分的都有一定的规律 但这样 便会限制我们的万年历 使其无法成为真正意义上的万年历 并会 使代码过于复杂 经过权衡 我们最终放弃了农历部分 此外 为使万年历更加人性化 我们还使其能够显示当前的系 统日期和当月日历 并且能够自由查看前后月份年份以及当前的日 历 框架构建框架构建 在最初设计之时 网站的框架尚未搭好 由其他成员负责 所 以我们暂时没有考虑如何与网站框架进行整合 原先有一种方案是 将日历直接嵌到主页中 放在角落里进行显示 后来由于想要使功 能本就不多的网站实现各个网页间的切换 最终将万年历单独放在 一个网页中进行显示 这便导致了我们的日历整体上看过于偏小 正如最后成果中展示的那样 我们采用文本框 文本选择框和 按钮来实现万年历的主体部分 上方显示万年历 用下拉菜单来选 取月份 文本框输入年份 查询按钮用来显示要查询的年月的日历 最后用多行文本框来输出日历 这样做一方面是因为月份只有 12 个 网络应用技术报告 3 可以通过下拉菜单实现 而年份太多无 法这样 另一方面也是为了实践更多的 方式 开始的想法是将当前日期放在标 题下面 但那样整体效果不佳 因此在之后设计时将其放在了其现 在出现的地方 最下面一排 便是在需求分析中提到的方便使用的 一系列按钮 方便从当前页面快速翻页 功能实现功能实现 在程序中 我们将不同的功能封装到一个个函数中 这样做使 各部分之间的影响尽可能少 在添加和修改的时候也更为方便 同 时 这样我们两个人便可以分别去编写功能函数 最后再合到一起 其间的过程互不影响 使用频率最高的函数是 displayCalendar month year 即日历输出 函数 其他各函数也是通过对此函数的调用来实现日历的显示 与 展示出来的表单的风格不同的是 此函数中 从表头到后面的日期 实际上都是用的字符输出 只是将它们一一对齐而已 如果一个月 的第一天不是周日便在之前输出空格 月末也是同理 每输出七个 日期 包括代替日期的空格 便换行 之所以在 1 9 日前面加 0 也 是为了方便对齐 由于水平有限 我们只好采用这种办法输出万年 历 但总体感觉不错 直观上能够较为清晰的显示日历 today 通过 date 对象的 getYear getMonth getDate 获得 系统的年月日 最初使用 setToday 函数显示当前的系统日期和相应 的日历 对于 2000 年以前 年份是用两位数表示的 因此要让其加 网络应用技术报告 4 上 1900 功能函数中有很多校验函数 用来对日期进行判断 isLeapYear Year 是用来判断年份是否为闰年 来确认 2 月的天数 isFourDigitYear year 用来保证年份的长度为四位数 因此便需要加入 这个函数防止混乱 每个月所包含的天数 是通过 getDaysInMonth month year 函数来进行相应的存储 特别注意了闰年 的 2 月有 29 天 selectDate 是万年历的基础功能 相对来讲实现起来也较为容 易 只需获取用户通过下拉菜单和文本框输入的年月并用日历输出 函数输出该年该月的日历即可 底下的五个按钮 除今天是用 setToday 实现外 其余四个是用 setPreviousYear 等四个函数实现的 具体的做法就是在之前的年份 月份上面加一减一 再通过 displayCalendar month year 显示日历 只 是对于一月和十二月要特别注意 这些功能函数编写完成后 只需让不同的按钮调用不同的函数 即可完成相应的操作 嵌入网站嵌入网站 万年历编写完成后 我们进行了调试和修改 之后的一步 也 是最后一步 就是将万年历与网站的模板进行整合 将其嵌入网站 在参与网站的美化工作后 网站的样式基本上固定了下来 之后将 网站整体样式的模板插入到我们所完成网页的相应位置就可以了 唯一美中不足的就是前面提到过的大小问题 但总体上我们两个人 网络应用技术报告 5 对我们的工作成果比较满意 通过这次万年历代码的编写 我们切身体验了一次网页程序编 写工作 中间遇到过很多困难 也出现过很多小的错误 其中不乏 粗心造成的 这些都给我们带来了很大的麻烦 我们通过向书本 向他人求教克服一个个困难 通过一次次核查来修正错误 这些都 是在平时知识的学习中所体会不到的 增加了我们的动手能力 使 我们受益颇深 附 完整代码 剔除网站模板部分 万年历 设置当前时间函数 function setToday var now new Date var day now getDate var month now getMonth var year now getYear if year1000 网络应用技术报告 7 year document wannianli year value year else month document wannianli month selectedIndex month displayCalendar month year 显示下一个月的所选年份的日历 function setNextMonth var year document wannianli year value if isFourDigitYear year var day 0 var month document wannianli month selectedIndex if month 11 month 0 year document wannianli year value year else month document wannianli month selectedIndex month displayCalendar month year 显示下一年的日历 function setNextYear var year document wannianli year value if isFourDigitYear year var day 0 var month document wannianli month selectedIndex year document wannianli year value year displayCalendar month year 网络应用技术报告 8 日历输入函数 function displayCalendar month year month parseInt month year parseInt year var i 0 var days getDaysInMonth month 1 year var firstOfMonth new Date year month 1 日期所在月份的第几天 var startingPos firstOfMonth getDay days startingPos 输出日历表头 换行和虚线 document calButtons calPage value Su Mo Tu We Th Fr Sa document calButtons calPage value n 在月前没有日期的位置输出空格 for i 0 i startingPos i if i 7 0 document calButtons calPage value n document calButtons calPage value 在被 7 整除余数为零时换行 for i startingPos i days i if i 7 0 document calButtons calPage value n 当日期小于 10 时 前面加 0 if i startingPos 1 10 document calButtons calPage value 0 document calButtons calPage value i startingPos 1 document calButtons calPage value 在超过日期数的位置上输出空格 for i days i 万年历 一月 二月