《24春国家开放大学《JavaScript程序设计》形考作业1-5参考答案.docx》由会员分享，可在线阅读，更多相关《24春国家开放大学《JavaScript程序设计》形考作业1-5参考答案.docx（25页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、国家开放大学JavaScript程序设计形考作业1-5参考答案形考作业1实训一：设计系统主页作业1.题目设计系统主页。2.目的（1）熟悉Web前端项目开发环境。（2）掌握如何建立Web前端项目，学会规划项目结构。（3）掌握动态生成页面内容的方法。（4）理解如何使用Flash显示图片新闻。（5）会在应用系统中编写播放动态新闻的程序。3.内容建立项目结构，并设计一个系统的主页，在主页中嵌入Flash播放新闻。4.要求（1）建立Web前端项目，规划好程序结构。（2）使用document.write()方法生成播放Flash的JavaScript代码。（3）可以方便地增减播放的图片新闻数量。（4）单击
2、图片时能够打开对应的新闻页面。linkhref=参考答案：1、让http:/127.0.0.1:8000可以直接访问首页添加一条urls.py配置：urlpatterns = . re_path($,views.index), #访问http:/127.0.0.1:8000可以直接访问首页2、应用bootstrap快速编写index首页导航条（1）引入bootstrap核心文件和jquery linkrel=stylesheethref=/static/blog/bootstrap-3.3.7/css/bootstrap.css （2）拷入bootstrap导航条模板代码拷贝这些代码到inde
3、x页面的body标签内。（3）对导航条代码做适当调整由于我们的页面导航栏用不上，删除模板中的form标签和标签的内容。形考作业2实训二：显示数据列表1.题目显示数据列表。2.目的（1）掌握流程控制语句的使用。（2）掌握函数的使用。（3）理解闭包的概念。（4）应会设计基本的应用程序。3.内容在所设计的项目中，实现显示数据列表。数据以表格的方式显示，不同的行显示不同的颜色。当单击每行数据的标题时，将会弹出窗口，显示详细信息。4.要求（1）数据存放在数组中，用程序实现数据显示。（2）以闭包的方式定义工具，窗口函数封装在工具中。（3）通过循环生成数据行，用条件判断实现不同行显示不同的颜色。参考答案：N
4、umber.prototype.NaN0=function()returnisNaN(this)?0:this;functiongetPosition(e) varleft=0; vartop=0; while(e.offsetParent) left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth).NaN0():0); top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth).NaN0():0); e=e.o
5、ffsetParent; left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth).NaN0():0); top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth).NaN0():0); returnx:left,y:top; $(table#thailand-qh tbody tr).each(function()$(td:even,this).css(font-weight,bold);$(td:eq(0),
6、this).css(text-align:left,font-weight:normal););$(table#thailand-qh tbody tr:odd).addClass(thailand-qh-tbody-tr-odd);$(table#thailand-qh tbody tr:even).addClass(thailand-qh-tbody-tr-even); function GetIframeInnerHtml(objIFrame)var iFrameHTML = ;if (objIFrame.contentDocument)/ For NS6iFrameHTML = obj
7、IFrame.contentDocument.innerHTML;else if (objIFrame.contentWindow)/ For IE5.5 and IE6iFrameHTML = objIFrame.contentWindow.document.body.innerHTML;else if (objIFrame.document)/ For IE5iFrameHTML = objIFrame.document.body.innerHTML;return iFrameHTML;实训三：随机显示题头图片1.题目随机显示题头图片。2.目的（1）掌握图像显示的基本知识。（2）掌握对象建
8、立的方法。（3）掌握Math的使用方法。（3）会应利用随机函数编写应用程序。3.内容结合一个具体应用的需求，设计随机显示题头的程序。4.要求（1）针对一个具体应用的需求，设计界面。（2）使用对象的方式存储图像信息，利用随机函数抽取图像。参考答案：#lr_systemboxwidth:980px;height:50px;background-color:#CCC;sition:relative; margin:0 auto; z-index:100000;.lr_systembtnwidth:201px;height:35px;line-height:33px;position:absolute
9、; top:0px; right:0px; z-index:100004;.lr_systembtn.lr_abtn width:100%; height:35px; display:block; font-size:15px; font-weight:bold;color:#666666;background-image:url(lr_images/btn_system.png);background-repeat:no-repeat;background-position:left top;.lr_systembtn .lr_abtn:hovercolor:#333333;backgrou
10、nd-position:left bottom;.lr_systembtn .lr_abtn span padding-left:28px;.lr_menu width:184px; padding:8px 6px 8px 6px; background-color:#ffffff; border:#ACACAC solid 2px;filter:alpha(opacity=90);opacity: 0.90;position:absolute; top:35px; right:0px; z-index:100005;display:none;.lr_menu dlwidth:100%; di
11、splay:block; overflow:hidden;.lr_menu a width:100%;display:block; color:#666666;border-bottom:#ACACAC dashed 1px;height:30px; line-height:30px; font-size:14px;background-image:url(lr_images/jt1.gif);background-repeat:no-repeat;background-position:6px center;.lr_menu a:hoverbackground-color:#E2E2E2;
12、color:#333333; text-decoration:none;.lr_menu dt.lr_menu dt afont-weight:bold;text-indent:14px;.lr_menu dd atext-indent:24px;background-position:16px center; ahref= 导航菜单 三级菜单测试 三级菜单测试 焦点幻灯片 网页特效 qq在线客服代码 ahref= 实训四：实现日期显示1.题目实现日期显示。2.目的（1）掌握Date对象的使用方法。（2）掌握通过Date获得年月日的方法。（3）巩固对多分支结构的掌握和应用。（3）利用Date设
13、计应用程序。3.内容结合一个具体应用的需求，实现日期的显示。4.要求（1）针对一个具体应用，设计日期显示的格式。（2）用JavaScript实现日期的显示。参考答案：import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date;import java.util.Scanner;public class DateCalculator public static void main(String args) 获取用户输入的起始日期和天数Scanner scanner = new Scanner(S
14、ystem.in);System.out.print(请输入起始日期（格式：yyyy-MM-dd）：);();System.out.print(请输入天数：);int days = scanner.nextInt();解析起始日期(yyyy-MM-dd);Date startDate;try (startDateStr);catch (n e) System.out.println(日期格式不正确);return;使用Calendar类进行日期计算.getInstance();calendar.setTime(startDate); (Calendar.DAY_OF_MONTH。days);格
15、式化计算后的日期String resultDate = sdf.format(calendar.getTime();输出计算结果System.out.println(计算后的日期+resultDate);形考作业3实训五：设计登录和注册页1.题目设计登录和注册页。2.目的（1）掌握表单域的引用方法。（2）掌握常用控件的基本方法。（3）掌握事件的处理方法。（4）理解Cookie的原理和应用。3.内容针对所设计的系统，设计登录和注册页。4.要求（1）登录界面能对输入的数据进行验证，要求非空，且符合一定的要求。（2）登录时，用条件判断输入的数据，模拟登录判断。登录成功后，用Cookie保存登录状态，
16、并进入主页。（3）主页含有注销功能。（4）注册界面能对数据进行验证。如电子邮件、电话号码等要符合格式要求。参考答案： 用户注册 注册页面 用户名： 密码 确认密码： 个人爱好： 足球 蓝球 排球 个人职业： 学生 员工 其他 性 别： 男 女 邮箱： 生日： 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 年 1 2 3 4 5 6 7 8 9 10 11 12 月 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 日 你所在地： 北京 天津 河北 上海 河南 吉林 黑龙江 内蒙古 山东 山西 陕西 甘肃 宁夏 青海 新疆 辽宁 江苏 浙江 安徽 广东 海南 广西 云南 贵州 四川