19、任务十八——事件委托、数组处理

最新推荐文章于 2022-01-10 10:50:17 发布

weixin_30512089

最新推荐文章于 2022-01-10 10:50:17 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/cjlalala/p/5820745.html

版权

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>