JavaScript完成万年历.doc

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