




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
PAGEPAGE1 《网页设计与制作》实验报告院系名称:管理学院专业班级:电子商务10级02班学生姓名:学号:2012年5月11日
实验三:JavaScript实验一、实验目的1、掌握利用JavaScript编写网页动态效果的能力;2、掌握在网页中使用JavaScript脚本的两种方法。二、实验课时2课时三、实验内容1、计算整数阶乘实验的结果(1)编制代码如下:<html><head><title>求数值的阶乘</title><scriptlanguage="javascript"type="text/javascript"><!--functionfactorial(anumber){anumber=Math.floor(anumber);if(anumber<0)return-1; if(anumber==0)return1; elsereturn(anumber*factorial(anumber-1));}functionss(){varva=document.myform.factorial.value;vars=factorial(va); alert(s);}//--></script></head><body><h2>请在文本框中输入一个整数,然后单击“计算”<br>按钮,计算该整数的阶乘。</h2><formname="myform"><inputname="factorial"value=""><p><inputtype="button"value="计算"onclick="ss()"><p></form></body></html>(2)效果如下:下拉菜单实验的结果编写hthl代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>河南工业大学</title><linkrel="stylesheet"href="header.css"type="text/css"/></head><body><divid="header"><divid="logo"><imgsrc="image/logo.jpg"alt="河南工业大学"width="857"height="82"/></div><divid="menu"><ul><li><ahref="#">网站首页</a></li><li><ahref="#">课程简介</a></li><li><a>课程大纲</a><ul><li><ahref="#">教学大纲</a></li><li><ahref="#">授课计划</a></li><li><ahref="#">实践实训</a></li></ul></li><li><a>电子课堂</a><ul><li><ahref="#">电子课件</a></li><li><ahref="#">电子教材</a></li><li><ahref="#">电子教案</a></li></ul></li><li><a>师资队伍</a><ul><li><ahref="#">课程负责人</a></li><li><ahref="#">师资队伍</a></li><li><ahref="#">课题研究</a></li></ul></li><li><ahref="#">教学录像</a></li><li><a>习题试题</a><ul><li><ahref="#">习题集锦</a></li><li><ahref="#">自测题</a></li><li><ahref="#">试题库</a></li><li><ahref="#">例题精讲</a></li></ul></li><li><ahref="#">参考文献</a></li><li><ahref="#">课程申报</a></li></ul></div><divid="pic"><imgsrc="image/pic.jpg"width="951";height="222"alt=""/></div></div><divclass="middle"><palign="center">课程简介</p><p>本课程作为学校校级精品课程,学校在政策、资金方面都给与本课程相应支持,并已推荐本课程申报省级级精品课程。</p><p>本课程作为学校校级精品课程已得到1万元的建设经费,在所申报课程被评为精品课程后,从经费投入、技术平台支持等方面继续加大对精品课程建设的过程管理和质量监督,同时鼓励品课程优质资源的开放和共享,并结合教育高地、特色专业与优秀教学团队建设,整合相关资源形成真正特色鲜明、队伍结构合理、教学水平一流、辐射效果好的示范课程。</p></div><divclass="bottom"><imgsrc="image/bottom.png"border="0"/></div></div></body></html>编写css文件如下:@charset"utf-8";/*CSSDocument*/*{font-size:16px;font-family:微软雅黑;color:#333;margin:0;padding:0;}Body{background:url(image/pd_r7_c2.png)repeat-y;width:100%;height:auto}a:link,a:visited,a:active,a:hover{text-decoration:none;cursor:pointer;}.clear{clear:both;}/*header部分*/#logo{ width:100%;height:83px;background:url(image/head_bg.gif)repeat-x;text-align:center;}#logoimg{margin:0auto;}#menu{height:41px;width:100%;background:url(image/nav_bg2.gif)repeat-x;}#menuul{list-style:none;margin-left:auto;margin-right:auto;width:954px;}#menuulli{float:left;width:106px;height:34px;margin-top:7px;position:relative;}#menuullia{background:url(image/nav_bg1.gif)no-repeatbottom;font:bold16px"微软雅黑";line-height:30px; color:#fff;display:block;text-align:center;}#menuullia:hover{background:url(image/nav_hover.gif)no-repeat;}#menuulliul{display:none;}#menuulli:hoverul{display:block;position:absolute;}#menuulli:hoverulli{float:none;width:105px;height:28px;margin:0px;}#menuulli:hoverullia{background:url(image/sec_navbg.gif)no-repeat;font:14px"微软雅黑";color:#FFCC00;display:block;line-height:28px;}#menuulli:hoverullia:hover{background:url(image/nav_hover.gif)no-repeat;}#pic{width:100%;height:222px;background:#025893;text-align:center;}#picimg{margin:0auto;}.middle{ margin:0pxauto;padding-top:26px;width:70%;height:auto; text-align:left;color:#CC0000;font-size:18px;line-height:1.5; text-indent:30px;}.bottom{margin:0pxauto;width:1351px;height:80px;}(3)效果如下:3、表单验证实验的结果(1)代码如下:<html><head><title>登记表</title><scriptlanguage="javascript">functioncheckIt(){varemail=document.getElementById("email");varmobileNo=document.getElementById("mobileNo");varphoneNo=document.getElementById("phoneNo");varIDNo=document.getElementById("IDNo");//邮箱验证if(email.value==null||email.value==""){document.getElementById("emailError").innerHTML="<fontcolor=red>请输入E-mail地址!</font>";email.focus();returnfalse;}else{document.getElementById("emailError").innerHTML="";}varregExpression=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;varobjExp=newRegExp(regExpression);if(objExp.test(email.value)==false){document.getElementById("emailError").innerHTML="<fontcolor=red>您输入的E-mail地址不正确!</font>";email.focus();returnfalse;}else{document.getElementById("emailError").innerHTML="";}//手机号码验证varregExpression=/^(86)?((13\d{9})|(15[0,1,2,3,5,6,7,8,9]\d{8})|(18[0,5,6,7,8,9]\d{8}))$/;if(!regExpression.test(mobileNo.value)){document.getElementById("mobileNoError").innerHTML="<fontcolor=red>您输入的手机号码有误!</font>";mobileNo.focus();returnfalse;}else{document.getElementById("mobileNoError").innerHTML="";}//固话验证varregExpression=/^((\d{3})-)?((\d{7})|(\d{8}))$/;if(!regExpression.test(phoneNo.value)){document.getElementById("phoneNoError").innerHTML="<fontcolor=red>您输入的固定号码有误!</font>";phoneNo.focus();returnfalse;}else{document.getElementById("phoneNoError").innerHTML="";}//身份证验证varregExpression=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/;if(!regExpression.test(IDNo.value)){document.getElementById("IDNoError").innerHTML="<fontcolor=red>您输入的身份证号码有误!</font>";IDNo.focus();returnfalse;}else{document.getElementById("IDNoError").innerHTML="";}}</script></head><body><formaction=""id="myform"><tablealign="center"><tr><tdfont_size="100">登记表</td></tr><tr><td>用户名:</td><td><inputtype="text"id="name"></td></tr><tr><td>性别:</td><td><inputtype="radio"name="sex"id="man"value="m"/>男<inputtype="radio"
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025标准版汽车租赁合同范本
- 2025二手车买卖交易合同范本
- 2025年个人租房合同范文
- 羽毛球知到课后答案智慧树章节测试答案2025年春山东工艺美术学院
- 2025简易办公室租赁合同
- 2024年浙大宁波理工学院招聘事业编制人员真题
- 2024年伊春市南岔县招聘社区工作者真题
- 太原境内旅游合同范本
- 2024年启东农村商业银行招聘真题
- 手绘学术论文答辩模板
- (省统测)贵州省2025年4月高三年级适应性考试(选择性考试科目)历史试卷(含答案)
- 浙江国企招聘2025宁波枢智交通科技有限公司招聘21人笔试参考题库附带答案详解
- 2022中国大连高级经理学院网络培训岗位人员公开招聘模拟检测试卷【共500题含答案解析】
- YY 0341.1-2020无源外科植入物骨接合与脊柱植入物第1部分:骨接合植入物特殊要求
- 自考04747Java语言程序设计(一)自学辅导资料
- 三级动火证 模板
- 毕业论文-基于单片机的智能浇花系统的设计与实现
- XK3168电子称重仪表技术手册
- 电梯系统质量检查记录表
- 最新山东地图含市县地图矢量分层可编辑地图PPT模板
- 机械设计齿轮机构基础
评论
0/150
提交评论