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( )等四个函数实现的，具体的做法就是在之前的年份月份上面加一减一，再通过displayCalendar(month,year)显示日历，只是对于一月和十二月要特别注意。这些功能函数编写完成后，只需让不同的按钮调用不同的函数即可完成相应的操作。嵌入网站万年历编写完成后，我们进行了调试和修改，之后的一步，也是最后一步，就是将万年历与网站的模板进行整合，将其嵌入网站。在参与网站的美化工作后，网站的样式基本上固定了下来，之后将网站整体样式的模板插入到我们所完成网页的相应位置就可以了。

唯一美中不足的就是前面提到过的大小问题，但总体上我们两个人对我们的工作成果比较满意。通过这次万年历代码的编写，我们切身体验了一次网页程序编写工作，中间遇到过很多困难，也出现过很多小的错误，其中不乏粗心造成的。这些都给我们带来了很大的麻烦，我们通过向书本、向他人求教克服一个个困难，通过一次次核查来修正错误，这些都是在平时知识的学习中所体会不到的，增加了我们的动手能力，使我们受益颇深。附：完整代码（剔除网站模板部分）HTMLHEADTITLE万年历/TITLEmeta http-equiv=Content-Language content=zh-cn /meta http-equiv=Content-Type content=text/html; charset=utf-8 /script language=JavaScript!--//设置当前时间函数function setToday(){var now=new Date();var day=now.getDate();var month=now.getMonth();var year=now.getYear();if(year2000)year=year+1900;this.focusDay=day;document.wannianli.month.selectedIndex=month;document.wannianli.year.value=year;displayCalendar(month,year);}//判断输入的年份是否为四位数function isFourDigitYear(year){if(year.length!=4){alert(请输入四位数年份);document.wannianli.year.select();document.wannianli.year.focus();}else{return true;}}//显示从表单提交的单击查看按钮所显示的日历function selectDate(){var year=document.wannianli.year.value;if(isFourDigitYear(year)){var day=0;var month=document.wannianli.month.selectedIndex;displayCalendar(month,year);}}//显示前一年的日历function setPreviousYear(){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);}}//显示前一月的日历function setPreviousMonth(){var year=document.wannianli.year.value;if(isFourDigitYear(year)){var day=0;var month=document.wannianli.month.selectedIndex;if (month==0){month=11;if(year1000){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);}}//日历输入函数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; idays; i++){if (i%7==0) document.calButtons.calPage.value +=\n;//当日期小于10时，前面加0if (i-startingPos+110)document.calButtons.calPage.value += 0;document.calButtons.calPage.value += i-startingPos+1;document.calButtons.calPage.value += ;}//在超过日期数的位置上输出空格for (i=days;i42;i++){if (i%7==0)document.calButtons.calPage.value +=\n;document.calButtons.calPage.value += ;}document.wannianli.Go.focus();}function getDaysInMonth(month,year){var days;if( month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12 )days=31;else if (month==4 || month==6 || month==9 || month==11 )days=30;else if (month==2 ){if (isLeapYear(year)){days=29;}else{days=28;}}return(days);}function isLeapYear (Year){if (((Year%4)==0 ) ((Year0)!=0) || ((Year%400)==0)){return(true);}else{return(false);}}//End--/scriptH2万年历/H2TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0FORM NAME=wannianli onSubmit=return false;TRTD COLSPAN=7CENTERSELECT NAME=month onChange=selectDate()OPTION一月/OPTIONOPTION二月/OPTIONOPTION三月/OPTIONOPTION四月/OPTIONOPTION五月/OPTIONOPTION六月/OPTIONOPTION七月/OPTIONOPTION八月/OPTIONOPTION九月/OPTIONOPTION十月/OPTIONOPTION十一月/OPTIONOPTION十二月/OPTION/SELECTINPUT NAME=year TYPE=TEXT SIZE=4 MAXLENGTH=4INPUT TYPE=button NAME=Go value=查看 onClick=selectDate()/CENTER/TD/TR/FORMtrtd align=centerscript language=Jscript function today(){var now=new Date();var day=now.getDate();var month=now.getMonth();var year=now.getYear();if(year2000)year=year+1900;document.write(今天：+year+年+(month+1)+月+day+日);}/scriptscript language=javascripttoday();/script/td/trFORM name=calButtonsTRTD align=centertextarea FONT=Courier name=calPage WRAP=no ROWS=9 COLS=22 /textarea/td/trTRTDCENTERpINPUT TYPE=BUTTON NAME=previousYear VALUE=前一年 onClick=setPreviousYear()INPUT TYPE=BUTTON NAME=previousYear VALUE=前一月 onClick=setPreviousMonth()INPUT TYPE=BUTTON NAME=previousYear VALUE=今天 onClick=setToday()INPUT TYPE=BUTTON NAME=previousYear VALUE=后一月 onClick=setNextMonth()INPUT TYPE=BUTTON NAME=previousYear VALUE=后一年 onClick=setNextYear()/p/CENTER/TD/TR/form/TABLE/centerhr //BODY/HTML网络应用技术报告1

本文地址：https://www.yimics.com/bzsm/41979.html