网页设计（十一）JavaScript事件分析
一、设计校园办公系统认证页面
校园办公系统认证页面
校园办公系统认证页面初始布局
卡号有效性检查页面
口令有效性检查页面
二次口令有效性检查页面
QQ/微信有效性检查图
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">口 令：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="提交">
<input type="reset" value="重置">
td>
tr>
table>
form>
div>
body>
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.用户注册
用户注册页面时输入帐号后失去焦点时页面效果
提交后显示用户所有信息
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位全数字
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
欢迎大家点赞 收藏 ⭐ 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！