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;
}
h1{
padding:20px;
}
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 name=以上是关于Web实训11的主要内容，如果未能解决你的问题，请参考以下文章