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

最新推荐文章于 2022-05-25 09:20:12 发布

韩飞扬婉

最新推荐文章于 2022-05-25 09:20:12 发布

阅读量1.9w

点赞数 21

分类专栏： web 文章标签： html web javascript css

本文链接：https://blog.csdn.net/weixin_45867761/article/details/110526594

版权

web 专栏收录该内容

19 篇文章 183 订阅

订阅专栏

项目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>

韩飞扬婉

关注

21
点赞
踩
158

收藏

觉得还不错? 一键收藏
13
评论
Web前端开发技术实验与实践（第3版）储久良编著实训11

项目11 JavaScript事件分析项目32 设计校园办公系统认证页面页面效果截图代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>校园办公系统认证页面</title> <style type="text/css"> div { margin: 0 auto;
复制链接

扫一扫