Web前端开发技术实验与实践（第3版）储久良编著实训11

项目11 JavaScript事件分析

项目32 设计校园办公系统认证页面
页面效果截图

代码

<!--prj_11_1.html-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>校园办公系统认证页面</title><style type="text/css">div {margin: 0 auto;padding: 30px 40px 50px;background: #00ff99 url(../img/bgimages.jpg);text-align: center;}table {border: 2px double #0000cc;text-align: center;margin: 0 auto;}#td1 {text-align: right;font-size: 20px;color: #6600ff;}#td2 {text-align: left;}label {color: red;font-weight: bold;}h3 {background-color: #0033ff;width: 500px;height: 40px;padding: 8px auto;font-size: 28px;text-align: center;font-family: 隶书;color: white;margin: 0 auto;margin-bottom: 8px;}input {height: 24px;}</style><script type="text/javascript">function $(id) {return document.getElementById(id);}function checkcardno() {var cno = myform.cardno.value;$("err_cardno").innerHTML = "";if (cno == "" || cno == null) {$("err_cardno").innerHTML = "卡号不能为空！";} else if (cno.length != 10) {$("err_cardno").innerHTML = "卡号长度必须为10！";} else {var firstnum = cno.charAt(0);if (firstnum == "0") {$("err_cardno").innerHTML = "卡号首字母必须不为0！";} else if (parseInt(cno).toString().length != 10) {$("err_cardno").innerHTML = "卡号不全为数字！";alert("卡号不全为数字！");}}}function checkkey() {var key1 = myform.key.value;$("err_key").innerHTML = "";if (key1 == "" || key1 == null) {$("err_key").innerHTML = "口令不能为空！";} else {if (key1.length < 8 || key1.length > 15) {$("err_key").innerHTML = "口令长度不能小于8或大于15！";}}}function checkkey2() {var key21 = myform.key2.value;var key11 = myform.key.value;$("err_key2").innerHTML = "";if (key21 == "" || key21 == null) {$("err_key2").innerHTML = "口令不能为空！";} else if (key21.length < 8 || key21.length > 15) {$("err_key2").innerHTML = "口令长度不能小于8或大于15！";} else if (key21 != key11) {$("err_key2").innerHTML = "口令与二次口令不相同！";}}</script></head><body><div id=""><h3>校园办公系统认证页面</h3><form action="" method="" name="myform"><table border="0" cellspacing="" cellpadding=""><tr><td rowspan="5"><img src="../img/sfyz_2.jpg"></td><td id="td1">校园卡号:</td><td id="td2"><input type="text" id="" value="" name="cardno" onblur="checkcardno()" /></td><td><label id="err_cardno"></label></td></tr><tr><td id="td1">口令:</td><td id="td2"><input type="password" name="key" onblur="checkkey()" /></td><td><label id="err_key"></label></td></tr><tr><td id="td1">二次口令:</td><td id="td2"><input type="password" name="key2" onblur="checkkey2()" /></td><td><label id="err_key2"></label></td></tr><tr><td id="td1">QQ/微信:</td><td id="td2"><input type="text" id="" value="" name="qqwx" onblur="checkqqwx()" /></td><td><label id="err_qqwx"></label></td></tr><tr><td colspan="3"><input type="submit" id="" name="" value="提交" /><input type="reset" value="重置" /></td></tr></table></form></div></body>
</html>

项目33 鼠标动作捕获与响应
页面效果截图

代码

<!--prj_11_2.html-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>鼠标动作捕获与响应</title><style type="text/css">form {text-align: center;}div {width: 400px;height: 200px;margin: 30px auto;background-color: #00cc99;text-align: center;}h3 {padding-top: 10px;}</style><script type="text/javascript">function $(id) {return document.getElementById(id);}function mover() {$("mybody").style.background = "#99cc66";$("image").src = "../img/image22.jpg";}function mout() {$("mybody").style.background = "#00cc99";$("image").src = "../img/image21.jpg";}function mdown() {form1.mtext.value = "按下鼠标";}function mclick() {form1.mtext.value = "单击鼠标";$("mybody").style.background = "#00ccaa";$("image").src = "../img/image23.jpg";}function mdclick() {form1.mtext.value = "双击鼠标";$("mybody").style.background = "#aaccff";$("image").src = "../img/image24.jpg";}</script></head><body><div id="mybody" onmouseover="mover();" onmouseout="mout();" onmousedown="mdown();" onclick="mclick();" ondblclick="mdclick();"><h3 align="center">鼠标动作捕获与响应</h3><hr size="1" color="white"><form action="" method="" name="form1"><input type="text" id="mtext" value="" /></form><img src="../img/image21.jpg" id="image" width="200px" height="100px" title=""></div></body>
</html>

Web前端开发技术实验与实践（第3版）储久良编著实训11相关推荐

web前端开发技术实验与实践（第三版）储久良编著项目12 设计简易网站导航
web前端开发技术实验与实践(第三版)储久良编著项目12 设计简易网站导航实训三项目12 设计简易网站导航一.页面文字素材: 序号网站名称 URL 1 百度 http://www.ba ...
web前端开发技术实验与实践（第三版）储久良编著项目16 div+CSS页面布局设计
web前端开发技术实验与实践(第三版)储久良编著项目16 实训五项目16 一.页面文字素材: 这是头部信息区. 这是导航信息区. 这是主题信息区. 这是右侧信息区. 这是版权信息区. 二.代码: ...
web前端开发技术实验与实践（第三版）储久良编著项目13 设计新生课程简介
web前端开发技术实验与实践(第三版)储久良编著项目13 设计新生课程简介实训三项目13 设计新生课程简介一.页面文字素材: 英语基础英语.高级英语.报刊选读.视听.口语.英语写作.翻译 ...
web前端开发技术实验与实践（第三版）储久良编著项目5 综合编程岗位介绍
实训一项目5 综合编程岗位介绍一.页面文字素材: WEB前端开发工程师的岗位职责:(1)协助系统架构设计师进行系统架构设计工作:(2)承担WEB前端核心模块的设计.实现工作:(3)承担主要开发工作 ...
Web前端开发技术实验与实践（第3版）储久良编著实训8
实训8 HTML5基础与CSS3应用项目22 当当网企业用户注册页面设计页面效果截图代码  <!DOCTYPE html> < ...
web前端开发技术实验与实践（第三版）储久良编著项目8 设计制度宣传展板
实训二项目8 设计制度宣传展板一.页面文字素材: 大型仪器必须有专人保管,须配有稳压电源,使用前须先检查仪器间各电路连接情况,再开稳压电源,然后再启动仪器开关. 必须严格执行仪器设备运行记录制度, ...
Web前端开发技术实验与实践代码（第三版）储久良
实训七表单页面设计项目21 设计大学生暑假社会实践调查问卷页面设计大学生暑假社会实践调查问卷页面结果截图 HTML代码结果截图 HTML代码 <!-- prj_7_2.html --& ...
Web前端开发技术实验与实践（第3版）储久良编著实训7
实训7 表单页面设计项目20 设计科技工作者建言页面页面效果截图代码  <!DOCTYPE html> <html>&l ...
Web前端开发技术实验与实践（第3版）储久良编著实训6
实训6 表格与表格页面布局项目18 设计网络主题研讨会日程表页面效果截图代码  <!DOCTYPE html> <html&g ...
Web前端开发技术实验与实践（第3版）储久良编著实训2
项目6 文本与段落标记应用页面效果截图代码  <!DOCTYPE html> <html><head><me ...

Web前端开发技术实验与实践（第3版）储久良编著实训11

项目11 JavaScript事件分析

Web前端开发技术实验与实践（第3版）储久良编著实训11相关推荐

最新文章

热门文章