web课设网页数据有效性验证.docVIP

网页数据有效性验证 【一】设计目的与要求 1. 掌握Javascript脚本编程。 2. 掌握访问网页中特定元素的方法。 3. 掌握给指定HTML元素动态设定样式的方法。 4.掌握为HTML控件编写事件响应函数的方法。 5、 掌握使用word,excel制作web系统的报表； 【二】设计内容（小四黑体）（5分） (1)这是一个经典的小游戏，由计算机随机生成一个1到100的数字，然后由玩家去猜，计算机给出提示。若玩家可以10次以内猜中，算玩家赢（图 3-1）。 图 3-1 猜数字游戏 1、使用Visual Web Developer创建一个网站，向网站中添加一个GuessNumber.htm网页。 2、根据图 4-2设计网页，注意两个设定了id的HTML元素“input”和“div”，前者用于取出用户输入的数字，后者则用于显示提示信息。 3、请在网页的head元素内编写JavaScript函数Guess()，实现游戏功能. 4、设置“对不对”按钮的单击事件响应函数为Guess()： input type=button value=对不对？ onclick=Guess(); / 要点提示： 1. 整个游戏的判断逻辑需使用条件语句实现。 2.可以使用document.getElementById()方法访问文本框元素，通过其value属性取出用户所输入的数。 3.使用document.getElementById()方法访问div元素，利用其innerHTML属性显示提示信息。 4.使用浏览器对象location. Reload()方法重新刷新网页，以便重新开始游戏。 (2)本实验将设计一个网页，网页上提供一个文字段落和四个单选钮，分别表示四种样式。用户点击选择一种样式，网页动态显示出样式应用于文字段落的效果（图3-2）。 图 3-2 动态样式切换 1、使用Visual Web Developer创建一个新网站，向网站中添加一个新网页：DynamicChangeStyleClass.htm。 2、根据示例网页定出网页逻辑结构和主体元素。 3、给页面添加以下样式类，这些样式类将被动态地应用于文字段落。 4、完成以下的JavaScript函数： function changestyle(styleIndex) { //在此处书写JavaScript代码 //根据传入的参数styleIndex是0，1，2还是3 //动态地将上面设定的样式类应用于文字段落 } 5、将changestyle()函数与四个单选钮的onclick事件挂接上（注意函数参数值的设定），一个示例如下： input id=Radio2 name=styles type=radio onclick=changestyle(1); /样式一 6、 在浏览器中打开网页，查看效果。 要点提示： 1.使用document.getElementById()获取对文本段落的引用，然后通过此引用设置其className属性，就可以将指定的样式类应用于文字段落。 2.要恢复默认的样式，只需将文字段落的className属性设为null。 (3)报表制作 1、输入课程的学生信息，包括学号、姓名、班级字段，如图1所示，至少录入5条记录，保存为student.xls。 使用java script脚本语言启动excel程序，创建excel表格，输入《web系统与技术》课程信息：学年，学期，选课课程号，课程名称，教师姓名，教师单位，上课时间，上课地点等信息。保存为C:\\ course.xls,退出excel程序。 课程名称 《web系统与技术》 学年 2018-2019 学期 1 选课课程号 教师姓名 谢从华 教师单位 计算机科学与工程学院 上课时间 星期1-3，4节 上课地点 S5-101 图3-3 课程信息 2、制作一个页面score.html，添加读取student.xls和course.xls文件的内容, 使用java script脚本语言生产一个新的excel文件report.xls, 并录入每个学生的5次平均成绩； 3、添加两个按钮，分别把成绩信息制作成word,excel文档的报表， 格式如图3-4所示。 图3-4 报表 【三】设计过程（步骤、命令、脚本代码与结果）（小四黑体）（75分） 1代码为：!DOCTYPE html html head meta charset=utf-8 / titleGuess a Number/title script type=text/javascript var count = 0; var m = parseInt(Math.ran