JavaScript常见案例
一.点灯开关控制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="light" src="img/off.gif">
</body>
<script>
/*
1、获取图片对象
2、绑定点击事件
3、切换图片
使用flag标注状态
* */
var element = document.getElementById("light");
var flag = false;//关闭状态
element.onclick = function (ev) {
if(flag){//如果灯开着
element.src = "img/off.gif";
flag = false;
}else{
element.src = "img/on.gif";
flag = true;
}
}
</script>
</html>
二.5s之后自动出现一张图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="time">5</span>
<img id="img" src="img/gui.jpg" style="display: none">
</body>
<script>
var time = document.getElementById("time");
var img = document.getElementById("img");
var num = time.innerHTML;
setInterval(function () {
if(num>1){
num--;
time.innerHTML = num;
}else{
img.style.display = "block";
}
},1000);
</script>
</html>
三.轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="img" src="img/banner_1.jpg">
</body>
<script>
var img = document.getElementById("img");
var num = 1;
setInterval(function () {
num++;
//判断num和3的大小
if(num>3){
num = 1;
}
img.src = "img/banner_"+num+".jpg";
},2000);
</script>
</html>
四.省级联动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="pro" onchange="choice()">
<option value="sc">四川</option>
<option value="cq">重庆</option>
<option value="gd">广东</option>
</select>
<select id="city">
<option>成都</option>
<option>德阳</option>
<option>绵阳</option>
</select>
</body>
<script>
var pro = document.getElementById("pro");
var city = document.getElementById("city");
function choice() {
var _pro = pro.value
switch (_pro) {
case "sc":
city.innerHTML = "<option>成都</option>\n" +
" <option>德阳</option>\n" +
" <option>绵阳</option>"
break;
case "cq":
city.innerHTML = "<option>重庆</option>";
break;
case "gd":
city.innerHTML = "<option>广州</option>\n" +
" <option>深圳</option>\n" +
" <option>东莞</option>"
break;
}
}
</script>
</html>
五.动态表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border: 1px solid;
margin : auto;
width: 500px;
}
td{
border: 1px solid;
}
div{
text-align: center;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入名字">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" id="add" value="添加" onclick="add()">
</div>
<table>
<tr>
<td>id</td>
<td>name</td>
<td>gender</td>
<td>delete</td>
</tr>
<tr>
<td>1</td>
<td>coco</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>bobo</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>yoyo</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</table>
</body>
<script>
function del(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
function add() {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
var table = document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML += " <tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0)\" onclick=\"del(this)\">删除</a></td>\n" +
" </tr>"
}
</script>
</html>
六.表格全选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border: 1px solid;
margin : auto;
width: 500px;
}
td{
border: 1px solid;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td>id</td>
<td>name</td>
<td>gender</td>
<td>delete</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" ></td>
<td>1</td>
<td>coco</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="choice"></td>
<td>2</td>
<td>bobo</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="choice"></td>
<td>3</td>
<td>yoyo</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</table>
<center>
<button id="qx">全选</button>
<button id="qbx">全不选</button>
<button id="fx">反选</button>
</center>
</body>
<script>
document.getElementById("qx").onclick = function () {
var checkboxs = document.getElementsByName("choice");
for (var i = 0;i<checkboxs.length;i++){
checkboxs[i].checked = true;
}
}
document.getElementById("qbx").onclick = function () {
var checkboxs = document.getElementsByName("choice");
for (var i = 0;i<checkboxs.length;i++){
checkboxs[i].checked = false;
}
}
document.getElementById("fx").onclick = function () {
var checkboxs = document.getElementsByName("choice");
for (var i = 0;i<checkboxs.length;i++){
checkboxs[i].checked = !checkboxs[i].checked;
}
}
var trs = document.getElementsByTagName("tr");
for (var i = 0;i<trs.length;i++){
trs[i].onmouseover = function (ev) {
this.style.background = "red"
}
trs[i].onmouseout = function (ev) {
this.style.background = "white"
}
}
</script>
</html>
七.表单验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form">
用户名：<input type="text" id="username" name="name" onblur="checkName()">
<span id="sp_name"></span>
<br>
<input type="submit">
</form>
</body>
<script>
window.onload = function (ev) {
document.getElementById("form").onsubmit = function (ev1) {
return checkName();
}
}
function checkName() {
var useranme = document.getElementById("username").value;
var sp_name= document.getElementById("sp_name");
var regExp = new RegExp("^.{3,20}$");
if(regExp.test(useranme)){
sp_name.innerHTML = "可以注册";
sp_name.style.color = "green";
return true;
}else{
sp_name.innerHTML = "用户名格式有误";
sp_name.style.color = "red";
return false;
}
}
</script>
</html>
