19、任务十八——事件委托、数组处理
生活随笔
收集整理的這篇文章主要介紹了
19、任务十八——事件委托、数组处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
0、題目
- 如圖，模擬一個隊列，隊列的每個元素是一個數字，初始隊列為空
- 有一個input輸入框，以及4個操作按鈕
- 點擊"左側入"，將input中輸入的數字從左側插入隊列中；
- 點擊"右側入"，將input中輸入的數字從右側插入隊列中；
- 點擊"左側出"，讀取并刪除隊列左側第一個元素，并彈窗顯示元素中數值；
- 點擊"右側出"，讀取并刪除隊列又側第一個元素，并彈窗顯示元素中數值；
- 點擊隊列中任何一個元素，則該元素會被從隊列中刪除
1、解題過程
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>task18</title> 6 <style> 7 #button{ 8 display:inline-block; 9 } 10 ul{ 11 list-style: none; 12 } 13 li{ 14 background-color: red; 15 display:inline-block; 16 width:20px; 17 padding:10px; 18 margin-left:3px; 19 color:white; 20 } 21 </style> 22 </head> 23 <body> 25 <input id="input" type="text"> 26 <div id="button"> 27 <button id="leftin">左側入</button> 28 <button id="rightin">右側入</button> 29 <button id="leftout">左側出</button> 30 <button id="rightout">右側出</button> 31 </div> 32 <ul id="result"> 33 </ul> 34 <script> 37 var $=function(id){ 38 return document.getElementById(id); 39 } 40 var number=[]; 41 //給按鈕的父元素添加事件委托，避免給每個按鈕添加點擊事件 42 $("button").addEventListener("click",function(e){ 43 var target=e.target, 44 value=$("input").value; 45 switch(target.id){ 46 case "leftin":{ 47 if(!/^\d+$/.test(value))alert("請輸入有效的數字"); 48 else{ 49 number.unshift(value); 50 show(); 51 } 52 break; 53 } 54 case "rightin":{ 55 if(!/^\d+$/.test(value)) alert("請輸入有效的數字"); 56 else{ 57 number.push(value); 58 show(); 59 } 60 break; 61 } 62 case "leftout":{ 63 alert(number.shift(number[number.length-1])); 64 show(); 65 break; 66 } 67 case "rightout":{ 68 alert(number.pop(number[0])); 69 show(); 70 break; 71 } 72 } 73 }) 74 //給輸出的結果添加事件委托，使點擊的元素被刪除 75 $("result").addEventListener("click",function(e){ 76 var target=e.target; 77 if(target.nodeName!="LI") return; 78 var tar=parseInt(target.getAttribute("id")); //得到被點擊元素的id屬性，之前id綁定的是該元素在數組中的序號 79 number.splice(tar,1); //刪除數組number中的元素，1代表只刪除一個元素 80 show(); 81 return number; 82 }) 83 //將得到的用戶輸入數據輸出顯示到id為result的列表中 84 function show(){ 85 var content=" "; 86 for(var i=0;i<number.length;i++){ 87 content+="<li id='"+i+"'>"+number[i]+"</li>"; 88 } 89 result.innerHTML=content; 90 } 91 </script> 92 </body> 93 </html>2、遇到的問題
（1）對輸入的數據進行驗證
題目要求輸入的數據是數字，所以用isNaN( )函數對輸入的數據進行驗證，后來發現沒有輸入數據以及輸入空格時，返回值都是false，原來isNaN()是把空串或空格作0處理的，所以返回值是false。因此用正則表達式驗證數據是否為數字。
（2）點擊的元素被刪除
給輸出的結果添加事件委托，驗證被點擊元素是否是<li>元素，如果是，就獲取被點擊元素的id屬性，之前每個<li>元素的id屬性已經綁定了該元素在數組中的序號，所以直接在數組中刪除這一元素，再重繪柱狀圖即可。
?
?
轉載于:https://www.cnblogs.com/cjlalala/p/5820745.html
總結
以上是生活随笔為你收集整理的19、任务十八——事件委托、数组处理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ubuntu学习——第一篇
- 下一篇： Docker Swarm：经济高效的容器