5、綜合案例 複選框
5.1、案例效果
5.2、分析和實作
功能分析
- 全選
-
- 為全選按鈕綁定單擊事件。
- 擷取所有的商品項複選框元素，為其添加 checked 屬性，屬性值為 true。
-
- 全不選
-
- 為全不選按鈕綁定單擊事件。
- 擷取所有的商品項複選框元素，為其添加 checked 屬性，屬性值為 false。
-
- 反選
-
- 為反選按鈕綁定單擊事件
- 擷取所有的商品項複選框元素，為其添加 checked 屬性，屬性值是目前相反的狀态。
-
代碼實作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複選框</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<th style="text-align: left">
<input style="background:lightgreen" id="selectAll" type="button" value="全選">
<input style="background:lightgreen" id="selectNone" type="button" value="全不選">
<input style="background:lightgreen" id="reverse" type="button" value="反選">
</th>
<th>分類ID</th>
<th>分類名稱</th>
<th>分類描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>1</td>
<td>手機數位</td>
<td>手機數位類商品</td>
<td><a rel="nofollow" href="">修改</a>|<a rel="nofollow" href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>2</td>
<td>電腦辦公</td>
<td>電腦辦公類商品</td>
<td><a rel="nofollow" href="">修改</a>|<a rel="nofollow" href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包類商品</td>
<td><a rel="nofollow" href="">修改</a>|<a rel="nofollow" href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a rel="nofollow" href="">修改</a>|<a rel="nofollow" href="">删除</a></td>
</tr>
</table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//全選
//1.為全選按鈕添加單擊事件
$("#selectAll").click(function(){
//2.擷取所有的商品複選框元素，為其添加checked屬性，屬性值true
$(".item").prop("checked",true);
});
//全不選
//1.為全不選按鈕添加單擊事件
$("#selectNone").click(function(){
//2.擷取所有的商品複選框元素，為其添加checked屬性，屬性值false
$(".item").prop("checked",false);
});
//反選
//1.為反選按鈕添加單擊事件
$("#reverse").click(function(){
//2.擷取所有的商品複選框元素，為其添加checked屬性，屬性值是目前相反的狀态
let items = $(".item");
items.each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
});
</script>
</html>
6、綜合案例 随機圖檔
6.1、案例效果
6.2、動态切換小圖的分析和實作
- 功能分析
- 準備一個數組
- 定義計數器
- 定義定時器對象
- 定義圖檔路徑變量
- 為開始按鈕綁定單擊事件
- 設定按鈕狀态
- 設定定時器，循環顯示圖檔
- 循環擷取圖檔路徑
- 将目前圖檔顯示到小圖檔上
- 計數器自增
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随機圖檔</title> </head> <body> <!-- 小圖 --> <div style="background-color:red;border: dotted; height: 50px; width: 50px"> <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;"> </div> <!-- 大圖 --> <div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px"> <img src="" id="big" style="width: 400px; height: 400px; display:none;"> </div> <!-- 開始和結束按鈕 --> <input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="開始"> <input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //1.準備一個數組 let imgs = [ "img/01.jpg", "img/02.jpg", "img/03.jpg", "img/04.jpg", "img/05.jpg", "img/06.jpg", "img/07.jpg", "img/08.jpg", "img/09.jpg", "img/10.jpg"]; //2.定義計數器變量 let count = 0; //3.聲明定時器對象 let time = null; //4.聲明圖檔路徑變量 let imgSrc = ""; //5.為開始按鈕綁定單擊事件 $("#startBtn").click(function(){ //6.設定按鈕狀态 //禁用開始按鈕 $("#startBtn").prop("disabled",true); //啟用停止按鈕 $("#stopBtn").prop("disabled",false); //7.設定定時器，循環顯示圖檔 time = setInterval(function(){ //8.循環擷取圖檔路徑 let index = count % imgs.length; // 0%10=0 1%10=1 2%10=2 .. 9%10=9 10%10=0 //9.将目前圖檔顯示到小圖檔上 imgSrc = imgs[index]; $("#small").prop("src",imgSrc); //10.計數器自增 count++; },10); }); </script> </html>
6.3、顯示大圖的分析和實作
-
- 為停止按鈕綁定單擊事件
- 取消定時器
- 設定按鈕狀态
- 将圖檔顯示到大圖檔上
-
//11.為停止按鈕綁定單擊事件 $("#stopBtn").click(function(){ //12.取消定時器 clearInterval(time); //13.設定按鈕狀态 //啟用開始按鈕 $("#startBtn").prop("disabled",false); //禁用停止按鈕 $("#stopBtn").prop("disabled",true); //14.将圖檔顯示到大圖檔上 $("#big").prop("src",imgSrc); $("#big").prop("style","width: 400px; height: 400px;"); });