版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35537301/article/details/82910637
案例所用知识点
1.焦点事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>焦点事件</title>
<script type="text/javascript">
function getFocus(){
var spanObj = document.getElementById("span1");
spanObj.innerHTML="获得焦点";
}
function loseFocus(){
var spanObj = document.getElementById("span1");
spanObj.innerHTML="失去焦点";
}
</script>
</head>
<body>
<input type="text" onfocus="getFocus()" onblur="loseFocus()"/>
<span id="span1"></span>
</body>
</html>
2.常见的事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>创建事件</title>
<style type="text/css">
#e02, #e022 {
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript">
// 页面加载事件：当整个html页面加载成功调用
window.onload = function(){
// 文本框事件
var e01 = document.getElementById("e01");
e01.onfocus = function(){
html("textMsg","文本框获得焦点：focus");
}
e01.onblur = function(){
html("textMsg","文本框失去焦点：blur");
}
e01.onkeydown = function(){
html("textMsg","键盘按下：keydown；");
}
e01.onkeypress = function(event){
var event = event || window.event;
append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；");
}
e01.onkeyup = function(){
append("textMsg","键盘弹起：keyup；");
}
// 鼠标事件
var e02 = document.getElementById("e02");
e02.onmouseover = function(){
html("divMsg","鼠标移上：mouseover");
}
e02.onmouseout = function(){
html("divMsg","鼠标移出：mouseout");
}
var e022 = document.getElementById("e022");
e022.onmousedown = function(){
html("divMsg2","鼠标按下：mousedown");
}
e022.onmouseup = function(){
html("divMsg2","鼠标弹起：mouseup");
}
// 按钮事件
var e03 = document.getElementById("e03");
e03.onclick = function () {
html("buttonMsg","单击：click");
};
e03.ondblclick= function () {
html("buttonMsg","双击：dblclick");
};
};
/**
* 指定位置显示指定信息
* @param objId ，元素的id属性值
* @param text，需要显示文本信息
*/
function html(objId,text){
document.getElementById(objId).innerHTML = text;
}
/**
* 指定位置追加指定信息
* @param objId ，元素的id属性值
* @param text，需要显示文本信息
*/
function append(objId,text){
document.getElementById(objId).innerHTML += text;
}
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span>
<hr/>
<div id="e02" >鼠标移上来试试</div><span id="divMsg"></span>
<hr/>
<div id="e022" >鼠标移上来点击试试</div><span id="divMsg2"></span>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span>
</body>
</html>案例1:表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
function checkForm() {
//获取对象
var usernameObj = document.getElementById("username");
var passwordObj = document.getElementById("password");
//操作对象
var usernameVal = usernameObj.value;
var passwordVal = passwordObj.value;
var flag = true;
//用户名的校验
if(/^\s*$/.test(usernameVal)) {
var usernameMsgObj = document.getElementById("username_msg");
usernameMsgObj.innerHTML = "<font color='red'>用户名不能为空</font>";
flag = false;
} else if(!/^[a-z0-9_-]{3,16}$/.test(usernameVal)) {
var usernameMsgObj = document.getElementById("username_msg");
usernameMsgObj.innerHTML = "<font color='red'>用户名输入的格式不正确</font>";
flag = false;
} else {
var usernameMsgObj = document.getElementById("username_msg");
usernameMsgObj.innerHTML = "";
}
//密码的校验
if(/^\s*$/.test(passwordVal)) {
var passwordMsgObj = document.getElementById("password_msg");
passwordMsgObj.innerHTML = "<font color='red'>密码不能为空</font>";
flag = false;
} else if(!/^[a-z0-9_-]{3,16}$/.test(passwordVal)) {
var passwordMsgObj = document.getElementById("password_msg");
passwordMsgObj.innerHTML = "<font color='red'>密码输入的格式不正确</font>";
flag = false;
} else {
var passwordMsgObj = document.getElementById("password_msg");
passwordMsgObj.innerHTML = "";
}
return flag;
}
</script>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
<table width="60%" height="60%" align="center" bgcolor="#ffffff">
<tr>
<td colspan="3">会员注册USER REGISTER</td>
</tr>
<tr>
<td width="20%">用户名:</td>
<td width="40%"><input type="text" name="username" id="username"></td>
<td width="40%"><span id="username_msg"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
<td><span id="password_msg"></span></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repassword" id="repassword"></td>
<td><span id="repassword_msg"></span></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email"></td>
<td><span id="email_msg"></span></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="checkcode">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>案例2:隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
<script type="text/javascript">
window.onload = function() {
var trObj = document.getElementsByTagName("tr");
for (var i = 0; i < trObj.length; i++) {
if (i % 2 == 0) {
trObj[i].style.backgroundColor = "cornflowerblue";
} else {
trObj[i].style.backgroundColor = "azure";
}
}
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr style="background-color: #999999;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
案例3:全选全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选全不选</title>
<script type="text/javascript">
function checkTh(obj) {
var itemSelectObj = document.getElementsByClassName("itemSelect");
for (var i = 0; i < itemSelectObj.length; i++) {
itemSelectObj[i].checked = obj;
}
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5">
<input type="button" value="添加" />
<input type="button" value="删除">
</td>
</tr>
<tr>
<th>
<input type="checkbox" id="thId" onclick="checkTh(this.checked)">
</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect">
</td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect">
</td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect">
</td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect">
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>案例4:省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script type="text/javascript">
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨", "齐齐哈尔", "大庆", "佳木斯");
arr[1] = new Array("长春市", "吉林市", "四平市", "通化市");
arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
arr[3] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
function selectCity(index) {
//获取市的数组
var cityArray = arr[index];
//获取市的下拉选
var citySelObj = document.getElementsByName("city");
//清空上一次下拉选的内容
citySelObj[0].innerHTML = "<option >-请选择-</option>";
for (var i = 0; i < cityArray.length; i++) {
//循环拼接下拉选的内容
citySelObj[0].innerHTML += "<option >" + cityArray[i] + "</option>";
}
}
</script>
</head>
<body>
<form action="#" method="get">
<input type="hidden" name="id" value="007" /> 姓名:
<input name="username" value="xuduoduo" />
<br> 密码:
<input type="password" name="password" value="123">
<br> 性别:
<input type="radio" name="sex" value="1" checked="checked">男
<input type="radio" name="sex" value="0">女
<br> 爱好:
<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="drink" checked="checked">喝
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
<br> 头像:
<input type="file" name="photo">
<br> 籍贯:
<select name="pro" onchange="selectCity(this.value)">
<option>-请选择-</option>
<option value="0">黑龙江</option>
<option value="1">吉林</option>
<option value="2">辽宁</option>
<option value="3">河南</option>
</select>
<select name="city">
<option>-请选择-</option>
</select>
<br> 自我介绍:
<textarea name="intr" cols="40" rows="4">good!</textarea>
<br>
<input type="submit" value="保存" />
<input type="reset" />
<input type="button" value="普通按钮" />
</form>
</body>
</html>