Web实训11
Posted Frozen_Guardian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web实训11相关的知识，希望对你有一定的参考价值。
项目1
<!doctype html>
<html lang="en" style="height:100%;">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Frozen_Guardian">
<title>校园办公室系统认证界面</title>
<style type="text/css">
body
height:100%;
background-image:url('https://s3.bmp.ovh/imgs/2021/10/178512fd5fb0ba87.jpg');
background-repeat:no-repeat;
background-size:100% 100%;
h1
width:360px;
background-color:blue;
color:white;
margin:30px auto;
padding:10px;
font-family:华文隶书;
.main
border:1px solid slateblue;
margin-left:38%;
display:inline-block;
.description
text-align-last:justify;
color:purple;
.hint
font-weight:bold;
color:red;
border-style:none;
background:none;
display:none;
img
height:120px;
float:left;
/* td white-space: nowrap; */
</style>
<script type="text/javascript">
function $(id)
return document.getElementById(id);
function checkNo()
var No=$("no").value,hint=$("t1");
if(No.length!=10)
hint.value="卡号长度必须为10!"
hint.size="12";
hint.style.display="block";
else if(!/^\\d+$/.test(No))
alert("卡号不全为数字!");
hint.value="卡号不全为数字!"
hint.size="11";
hint.style.display="block";
else
hint.value="";
hint.style.display="none";
function checkPassword()
var pwd=$("pwd").value,hint=$("t2");
if(pwd.length<8||pwd.length>15)
hint.value="口令长度不能小于8或大于15!"
hint.size="21";
hint.style.display="block";
else
hint.value="";
hint.style.display="none";
function checkRePassword()
var re_pwd=$("re_pwd").value,pwd=$("pwd").value,hint=$("t3");
if(re_pwd!=pwd)
hint.value="口令与二次口令不相同!"
hint.size="16";
hint.style.display="block";
else
hint.value="";
hint.style.display="none";
function checkWeChat()
var wechat=$("wechat").value,hint=$("t4");
if(wechat.length==0)
hint.value="微信号不能为空!";
hint.size="10";
hint.style.display="block";
else
hint.value="";
hint.style.display="none";
function clearr()
$("myForm").reset();
$("t1").style.display="none";
$("t2").style.display="none";
$("t3").style.display="none";
$("t4").style.display="none";
</script>
</head>
<body>
<form id="myForm">
<h1>校园办公室系统认证界面</h1>
<div class="main">
<img src="https://s3.bmp.ovh/imgs/2021/10/3af7a9aa995eb6d8.jpg"/>
<table cellspacing="0">
<tr>
<td class="description">校园卡号</td>
<td class="description">：<input id="no" type="text" size="15" onblur="checkNo()"/></td>
<td><input class="hint" id="t1" type="text" readonly="readonly"/></td>
</tr>
<tr>
<td class="description">口令</td>
<td class="description">：<input id="pwd" type="password" size="15" onblur="checkPassword()"/></td>
<td><input class="hint" id="t2" type="text" readonly="readonly"/></td>
</tr>
<tr>
<td class="description">二次口令</td>
<td class="description">：<input id="re_pwd" type="password" size="15" onblur="checkRePassword()"/></td>
<td><input class="hint" id="t3" type="text" readonly="readonly"/></td>
</tr>
<tr>
<td class="description">QQ/微信</td>
<td class="description">：<input id="wechat" type="text" size="15" onblur="checkWeChat()"/></td>
<td><input class="hint" id="t4" type="text" readonly="readonly"/></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit"/>
<input type="button" onclick="clearr()" value="重置"/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
项目2
<!doctype html>
<html lang="en" style="height:100%;">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Frozen_Guardian">
<title>鼠标动作捕获与响应</title>
<style type="text/css">
div
width:100%;
height:100%;
text-align:center;
background-color:lightseagreen;
overflow:hidden;
h1
margin-top:10px;
input
margin:20px auto;
font-size:150%;
display:block;
</style>
<script type="text/javascript">
function $(id)
return document.getElementById(id);
function over()
$("main").style.backgroundColor="greenyellow";
$("show").src="https://s3.bmp.ovh/imgs/2021/10/92bfb05c702468e0.jpg";
$("state").value="";
function leave()
$("main").style.backgroundColor="lightseagreen";
$("show").src="https://s3.bmp.ovh/imgs/2021/10/3b08d6a9953b0281.jpg";
$("state").value="";
function clickk()
$("main").style.backgroundColor="greenyellow";
$("show").src="https://s3.bmp.ovh/imgs/2021/10/e2f0762b0aafdf8a.jpg";
$("state").value="单击鼠标";
function dbclick()
$("main").style.backgroundColor="steelblue";
$("show").src="https://s3.bmp.ovh/imgs/2021/10/2d8db1e23947e5e4.jpg";
$("state").value="双击鼠标";
</script>
</head>
<body style="height:100%;">
<div id="main" onmouseover="over()" onmouseleave="leave()" onclick="clickk()" ondblclick="dbclick()">
<h1>鼠标动作捕获与响应</h1>
<hr color="white" size="5"/>
<input id="state" type="text" readonly="readonly"/>
<img id="show" src="https://s3.bmp.ovh/imgs/2021/10/3b08d6a9953b0281.jpg" width="320px" height="228px" />
</div>
</body>
</html>
课外扩展1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta 以上是关于Web实训11的主要内容，如果未能解决你的问题，请参考以下文章