1、註冊表單校驗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單校驗</title>
</head>
<script>
function infoCheck(id,info){
document.getElementById(id+"Span").innerHTML="<font color='burlywood'>"+info+"</font>";
}
function nullCheck(id,info){
var val = document.getElementById(id).value;
if(val == ""){
document.getElementById(id+"Span").innerHTML="<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"Span").innerHTML="<font color='green'>√</font>";
}
}
function notEquCheck(id,pwd,info,info1){
var val = document.getElementById(id).value;
var val1 = document.getElementById(pwd).value;
if(val == ""){
document.getElementById(id+"Span").innerHTML="<font color='red'>"+info+"</font>";
}else if(val != val1){
document.getElementById(id+"Span").innerHTML="<font color='red'>"+info1+"</font>";
}else{
document.getElementById(id+"Span").innerHTML="<font color='green'>√</font>";
}
}
function emailCheck(id,info,info1){
var val = document.getElementById(id).value;
if(val == ""){
document.getElementById(id+"Span").innerHTML="<font color='red'>"+info+"</font>";
}else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(val)){
document.getElementById(id+"Span").innerHTML="<font color='red'>"+info1+"</font>";
}else{
document.getElementById(id+"Span").innerHTML="<font color='green'>√</font>";
}
}
</script>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
<table border="1px" width="600px" height="400px" align="center" cellspacing="0px" cellpadding="1px">
<tr>
<td width="130px">用戶名</td>
<td>
<input type="text" name="userName" size="40" id="userName" onfocus="infoCheck(this.id,'用戶名必填！')"
onblur="nullCheck(this.id,'用戶名不能爲空！')"/>
<span id="userNameSpan"></span>
</td>
</tr>
<tr>
<td>密碼</td>
<td>
<input type="password" name="password" size="40" id="password" onfocus="infoCheck(this.id,'密碼必填！')"
onblur="nullCheck(this.id,'密碼不能爲空！')"/>
<span id="passwordSpan"></span>
</td>
</tr>
<tr>
<td>確認密碼</td>
<td>
<input type="password" name="rePassword" size="40" id="rePassword" onfocus="infoCheck(this.id,'密碼必填！')"
onblur="notEquCheck(this.id,'password','確認密碼不能爲空！','兩次密碼不一致！')"/>
<span id="rePasswordSpan"></span>
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="uName" size="40" id="uName"/>
</td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="startDate" size="40" id="startDate"/>
</td>
</tr>
<tr>
<td>郵箱</td>
<td>
<input type="text" name="email" size="40" id="email" onfocus="infoCheck(this.id,'郵箱必填！')"
onblur="emailCheck(this.id,'郵箱不能爲空！','郵箱不合法！')"/>
<span id="emailSpan"></span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value=" 注 冊 " />
</td>
</tr>
</table>
</form>
</body>
</html>
2、定時輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定時輪播圖</title>
</head>
<script>
var count = 1;
function nextImg(){
count ++;
document.getElementById("img").src="../img/"+count+".jpg";
if(count == 3){
count = 0;
}
}
function init(){
setInterval("nextImg()",3000);
}
</script>
<body onload="init()">
<img src="../img/1.jpg" id="img" height="600px" width="1000px" align="center"/>
<input type="button" value="下一頁" onclick="nextImg()"/>
</body>
</html>
3、定時彈出並隱藏廣告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定時彈出並隱藏廣告</title>
</head>
<script>
function init(){
bFlag = setInterval("dis_block()",3000);
}
function dis_block(){
document.getElementById("img").style.display="block";
clearInterval(bFlag);
nFlag = setInterval("dis_none()",3000);
}
function dis_none(){
document.getElementById("img").style.display="none";
clearInterval(nFlag);
}
</script>
<body onload="init()">
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img" style="display: none;"/>
<img src="../img/1.jpg" />
</body>
</html>
4、隔行換色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行換色</title>
</head>
<script>
function init(){
var tbl = document.getElementById("tbl");
var len = tbl.tBodies[0].rows.length;
for (var i = 0;i < len;i ++) {
if(i%2 == 0){
tbl.tBodies[0].rows[i].style.background="burlywood";
}else{
tbl.tBodies[0].rows[i].style.background="aquamarine";
}
}
}
</script>
<body onload="init()">
<table border="1px" align="center" width="500px" height="300px" cellspacing="0px" id="tbl">
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
5、行-高亮顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行-高亮顯示</title>
</head>
<script>
function overColor(id,flag){
if(flag == 'over'){
document.getElementById(id).style.background="antiquewhite";
}else{
document.getElementById(id).style.background="white";
}
}
</script>
<body>
<table border="1px" align="center" width="500px" height="300px" cellspacing="0px" id="tbl">
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr onmouseover="overColor(this.id,'over')" id="tr1" onmouseout="overColor(this.id,'out')">
<td>1</td>
<td>張三</td>
<td>男</td>
</tr>
<tr onmouseover="overColor(this.id,'over')" id="tr2" onmouseout="overColor(this.id,'out')">
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr onmouseover="overColor(this.id,'over')" id="tr3" onmouseout="overColor(this.id,'out')">
<td>3</td>
<td>王五</td>
<td>男</td>
</tr>
<tr onmouseover="overColor(this.id,'over')" id="tr4" onmouseout="overColor(this.id,'out')">
<td>4</td>
<td>劉紅</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
6、全選-全不選
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全選-全不選</title>
</head>
<script>
function checkAll(){
var checkAllBtn = document.getElementById("checkAllBtn").checked;
var checkbtn = document.getElementsByName("checkbtn");
for (var i = 0;i<checkbtn.length;i++) {
if(checkAllBtn==true){
checkbtn[i].checked=true;
}else{
checkbtn[i].checked=false;
}
}
}
</script>
<body>
<table border="1px" align="center" width="500px" height="300px" cellspacing="0px">
<thead>
<tr>
<th><input type="checkbox" id="checkAllBtn" onclick="checkAll()"/></th>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="checkbtn" /></td>
<td>1</td>
<td>張三</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbtn" /></td>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbtn" /></td>
<td>3</td>
<td>王五</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbtn" /></td>
<td>4</td>
<td>劉紅</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
7、省市二級聯動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市二級聯動</title>
</head>
<script>
var cities = new Array(5);
cities[0] = new Array("海淀區","昌平區","朝陽區");
cities[1] = new Array("黃浦區","盧灣區","長寧區");
cities[2] = new Array("和平區","河東區","河西區");
cities[3] = new Array("哈爾濱市","齊齊哈爾市","雞西市");
function changeCity(val){
var city = document.getElementById("city");
city.length=0;
for (var i=0;i<cities[val].length;i++) {
var textNode = document.createTextNode(cities[val][i]);
var Ele = document.createElement("option");
Ele.appendChild(textNode);
city.appendChild(Ele);
}
}
</script>
<body>
<select onchange="changeCity(this.value)">
<option>--請選擇--</option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">天津</option>
<option value="3">黑龍江</option>
</select>
<select id="city"></select>
</body>
</html>