网页设计(十一)JavaScript事件分析

发布时间:2024年01月18日

在这里插入图片描述


一、设计校园办公系统认证页面

校园办公系统认证页面
在这里插入图片描述
校园办公系统认证页面初始布局
在这里插入图片描述

卡号有效性检查页面
在这里插入图片描述
在这里插入图片描述

口令有效性检查页面
在这里插入图片描述

二次口令有效性检查页面
在这里插入图片描述
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">&nbsp;&nbsp;&nbsp;&nbsp;令:</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="提交">&nbsp;&nbsp;
							<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取value
				var 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
在这里插入图片描述

在这里插入图片描述

欢迎大家点赞 👍 收藏 ? 加关注哦!
如果你认为这篇文章对你有帮助,请给正函数点个赞吧,如果发现什么问题,欢迎评论区留言!!

文章来源:https://blog.csdn.net/m0_73378536/article/details/135659849
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。