实验报告九
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
项目1 设计校园办公系统认证页面
用JavaScript定义函数$(id) 来访问节点，checkcardno()来验证卡号，checkkey()来验证密码，checkkey2()来验证二次输入密码，checkqqwx()来验证QQ微信。
用innerHTML修改第五列的label里面的信息，从而给予输入提示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>校园办公系统认证页面</title>
<style type="text/css">
div{margin:0px auto; padding:30px 40px 50px; background:#00FF99 url("bg_id.jpg");}
table{border:2px double #0000ff; text-align:center; margin:0px auto;}
#td1{text-align:center; 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:white;}
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)<1000000000){
$("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="口令与二次口令不相同！"; }
}
function checkqqwx(){
var qqwx1=myform.qqwx.value;
$("err_qqwx").innerHTML="";
if (qqwx1==null||qqwx1=="")
{$("err_qqwx").innerHTML="微信号不能为空！"; }
}
</script>
</head>
<body>
<div>
<form name="myform" action="" method="post">
<table>
<caption><h3>校园办公系统认证页面</h3></caption>
<tr>
<td rowspan="5"><img src="sfyz_2.jpg"></td>
</tr>
<td id="td1">校园卡号:</td><td id="td2">
<input name="cardno" type="text" onBlur="checkcardno()"></td>
<td><label id="err_cardno"></label></td>
<tr>
<td id="td1">口 令:<td id="td2"><input name="key" type="password" onBlur="checkkey"></td>
</td><td><label id="err_key"></label></td>
</tr>
<tr>
<td id="td1">二次口令:</td><td id="td2"><input name="key2" type="password" onBlur="checkkey2()"></td>
<td><label id="err_key2"></label></td>
</tr>
<tr>
<td id="td1">QQ/微信:</td><td id="td2"><input name="qqwx" type="text" onBlur="checkqqwx()"></td><td><label id="err_qqwx"></label></td>
</tr>
<tr>
<td></td>
<td colspan="3">
<input type="submit" value="提交"> <input type="reset" value="重置"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
项目2 鼠标动作捕获与响应
用JavaScript定义函数$(id)来访问节点，mover()来表示鼠标在上方时候显示的图片mout()表示鼠标移开时候显示的图片，mdown()表示按下鼠标的时候显示的图片，mclick()表示单击鼠标的时候显示的图片，mdclick()表示双击鼠标的时候显示的图片。
通过表单和表单里面的文本框名字来改变文本框中显示鼠标动作的数据。
<!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:#00cc99;} h3{padding-top:10px}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
function mover(){
$("mybody").style.background="#99cc66";
$("image").src="image22.jpg";}
function mout(){
$("mybody").style.background="#00cc99";
$("image").src="image21.jpg";
}
function mdown(){
forml.mtext.value="按下鼠标";}
function mclick(){
forml.mtext.value="单击鼠标";
$("mybody").style.background="#00ccaa";
$("image").src="image23.jpg";}
function mdclick(){
forml.mtext.value="双击鼠标";
$("image").src="image24.jpg";
$("mybody").style.background="#aaccff";}
</script>
</head>
<body>
<div id="mybody" onMouseOver="mover()" onMouseOut="mout()" onMouseDown="mdown()" onClick="mclick()" onDblClick="mdclick()">
<h3 align="center">鼠标动作捕获与响应</h3>
<hr color="#FFFFFF" size="1px">
<form name="forml">
<input id="mtext" type="text">
</form>
<center><img src="image21.jpg" id="image" width="200px" height="100px" title="图区"></center>
</div>
</body>
</html>
总结：
通过这次实验我知道了掌握事件、事件源、事件句柄、事件处理程序的概念，理解它们之间的关系，学会指定事件处理程序的方法，学会编写简单的事件处理程序，表单控件输入内容提取与有效性检查鼠标单击、双击事件、移出、移动、悬停等事件处理程序编写。