JavaScript部分案例
阿新 • • 發佈：2019-01-22
部分 pad lur ase node choice hang remove color
01、電燈的開關
<img id="light" src="img/off.gif">
<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>
02、設置時間彈出圖片或其他
<span id="time">5</span>
<img id="img" src="img/gui.jpg" style="display: none">
<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>
03、輪播圖
<img id="img" src="img/banner_1.jpg">
<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>
04、多級聯動
<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>
<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>
05、動態表格
<style>
table{
border: 1px solid;
margin : auto;
width: 500px;
}
td{
border: 1px solid;
}
div{
text-align: center;
}
</style>
<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>
06、根據輸入的行和列，創建表格
<div>
請輸入你想創建的表格：
行：<input type="text" id="row">
列：<input type="text" id="col">
<input type="button" id="creat" value="創建" onclick="creat()">
</div>
<div id="div1">
</div>
<script>
function creat() {
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
var div1 = document.getElementById("div1");
var tab = "<table border=‘1‘ cellpadding=‘0‘ cellspacing=‘0‘ style=‘margin: 50px auto‘>";
for (var i = 1; i <= row; i++) {
tab += "<tr>";
for (var j = 1; j <= col; j++) {
tab += "<td style=‘width: 50px;height: 30px;‘>aa</td>";
}
tab += "</tr>";
}
tab += "</table>";
div1.innerHTML = tab;
}
</script>
07、表單驗證
<form id="form">
用戶名：<input type="text" id="username" name="name" onblur="checkName()">
<span id="sp_name"></span>
<br>
<input type="submit">
</form>
<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>
JavaScript部分案例