网页设计（十一）JavaScript事件分析
一、设计校园办公系统认证页面
校园办公系统认证页面
校园办公系统认证页面初始布局
卡号有效性检查页面
口令有效性检查页面
二次口令有效性检查页面
QQ/微信有效性检查图
<!-- prj_11_1.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>校园办公系统认证页面</title><style type="text/css">div {margin: 0 auto;padding: 30px 40px 50px;background: #F1F2F3 url("pro111/bg_id.jpg");}table {border: 2px double #0000ff;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: #0033ff;width: 500px;height: 40px;padding: 8px auto;font-size: 28px;text-align: center;font-family: 隶书;color: #FFFFFF;}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 == "" || isNaN(parseInt(cno))) { // 为空或不输入时$("err_cardno").innerHTML = "卡号不能为空！";} else if (cno.length != 10) {$("err_cardno").innerHTML = "卡号长度必须为10！";} else {var firstnum = cno.charAt(0);if (firstnum == "0") //首字符不能为0{$("err_cardno").innerHTML = "卡号首字母必须不为0!";} else if (parseInt(cno).toString().length != 10) {$("err_cardno").innerHTML = "卡号不是10位数字!";//alert("卡号不是10位数字!");}}}/*口令有效性检查*/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 = "口令与二次口令不相同！";}}function checkqqwx() {var qqwx1 = myform.qqwx.value; //存放QQ/微信$("err_qqwx").innerHTML = "";if (qqwx1 == null || qqwx1 == "") {$("err_qqwx").innerHTML = "微信号不能为空！";}}</script></head><body><div id="" class=""><form name="myform" method="post" action="" onsubmit=""><table><caption><h3>校园办公系统认证页面</h3></caption><tr><td rowspan="5"><img src="pro111/sfyz_2.jpg" width="120" border="0" alt=""></td><td id="td1">校园卡号：</td><td id="td2"><input type="text" 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" name="qqwx" onblur="checkqqwx();"></td><td><label id="err_qqwx"></label></td></tr><tr><td colspan="4"><input type="submit" value="提交"> <input type="reset" value="重置"></td></tr></table></form></div></body>
</html>
二、鼠标动作捕获与响应
初始与鼠标移出后页面
鼠标盘旋时页面
鼠标单击后页面
鼠标双击后页面
<!-- prj_11_2.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title> 鼠标动作捕获与响应 </title><style type="text/css">form {text-align: center;}div {background: #00CC99;width: 500px;height: 280px;margin: 0 auto;text-align: center;}h3 {padding-top: 10px;}img {border-radius: 10px;height: 150px;}</style><script type="text/javascript">function $(id) {return document.getElementById(id);}function mover() {$("mybody").style.background = "#99CC66";$("image").src = "pro112/image22.jpg"; //切换图像}function mout() {$("mybody").style.background = "#00CC99";$("image").src = "pro112/image21.jpg"; //切换图像}function mdown() {form1.mtext.value = "按下鼠标";}function mclick() {form1.mtext.value = "单击鼠标";$("mybody").style.background = "#00CCAA"$("image").src = "pro112/image23.jpg"; //切换图像}function mdclick() {form1.mtext.value = "双击鼠标";$("image").src = "pro112/image24.jpg"; //切换图像$("mybody").style.background = "#AACCFF"}</script></head><body><div id="mybody" onmouseOver="mover()" onMouseOut="mout()" onclick="mclick();" onmousedown="mdown()" ondblclick="mdclick();"><h3 align="center">鼠标动作捕获与响应</h3><hr color="white" size="1"><form name="form1" method="post" action=""><input type="text" name="" id="mtext"><br /><br /></form><img src="pro112/image21.jpg" id="image" title="图区"></div></body></html>
三、课外拓展训练
1.用户注册
用户注册页面时输入帐号后失去焦点时页面效果
提交后显示用户所有信息
<!-- project_11_1.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>用户注册</title><style type="text/css">fieldset {width: 300px;height: 200px;text-align: center;}</style><script type="text/javascript">function displayName() {alert("帐号：" + myForm.username.value);}function displayPassword() {alert("密码：" + myForm.password.value);}function displayAll() {var allinfo = "帐号：" + myForm.username.value; //添加帐号allinfo += "\n密码：" + myForm.password.value; //添加密码allinfo += "\n用户类型：" + myForm.user.value; //添加用户类型信息alert(allinfo);}</script></head><body><form name="myForm" method="post" action="" onsubmit="displayAll();"><fieldset><legend align="center">用户注册</legend><br><br> 帐号：<input type="text" name="username" onblur="displayName()"><br> 密码：<input type="password" name="password"><br> 用户类型:<input type="radio" name="user" checked="checked" value="教师">教师<input type="radio" name="user" value="学生">学生<input type="radio" name="user" value="管理员">管理员<input type="submit" value="提交"><input type="reset"></fieldset></form></body>
</html>
2.检验学号合法性
学号合法性检查-不足10位数字
学号合法性检查-10位非全数字
学号合法性检查-10位全数字
<!-- project_11_2.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>学号合法性检查</title><script type="text/javascript">function checkNo() {/* 检查内容：学号必须为10位、且完全是数字*/var stuno = myform.myno.value; //根据name取valuevar rightbool = true; //合法性检查变量if (stuno.length != 10) {alert("学号长度不足10位，请重输入！");myform.myno.value = ""; //文本框清空} else {for (var i = 0; i < stuno.length; i++) {var onechar = stuno.charAt(i); //每次取1位判断if (onechar > "9" || onechar < "0") {alert("学号必须为数字字符，请重输入！");rightbool = false; //只要有1位不是数字就赋假值myform.myno.value = ""; //文本框清空break;}}if (rightbool) {alert("学号输入正确！");}}}</script></head><body><h3>检查学号的合法性</h3><form name="myform" method="post" action="">输入学号：<input type="text" name="myno" size="10" maxlength="10"><input type="button" value="合法性检查" onclick="checkNo();"></form></body>
</html>
作者主页： 正函数的个人主页
文章收录专栏： Web design
欢迎大家点赞 👍 收藏 ⭐ 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！