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属性已经绑定了该元素在数组中的序号，所以直接在数组中删除这一元素，再重绘柱状图即可。