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、任务十八——事件委托、数组处理相关推荐

17、任务十六——事件委托机制、简单表单验证
0.题目用户输入城市名称和空气质量指数后,点击"确认添加"按钮后,就会将用户的输入在进行验证后,添加到下面的表格中,新增一行进行显示用户输入的城市名必须为中英文字符,空气质量指 ...
《C#零基础入门之百识百例》（二十八）交错数组 -- foreach求和
C#零基础入门数组相关 -- 顺序查找前言一,交替数组 1.1 定义 1.2 初始化二,foreach语句 2.1 概念介绍 2.2 注意事项 2.3 遍历一维数组三,实例练习 -- for ...
【Vue2.0】— 组件的自定义事件（十八）
[Vue2.0]- 组件的自定义事件(十八) <template><div ><h2>{{msg}}</h2><!-- 通过父组件给子组件传递函数 ...
JavaScript中的经典题型（类数组、CSS Sprites、事件委托、经典去重、原型链、闭包、深浅克隆、附带思路流程和源码）
JavaScript中的经典题型一.JavaScript中的经典题型 1..如何判断一个数组和类数组? 首先要明白什么是类数组. 类数组:类数组是一个普通对象,他的原型是Object.而真实的数组是 ...
二维数组离散程度matlab,(十八)数据分析中的一些概念
(十八)数据分析中的一些概念 HIKAI 29 SEP 2017 0 Comments 矢量.向量.标量矢量和向量是一个东西,只是在不同领域里面用到的不同称呼.矢量常常用在物理学中,向量在数学.几何 ...
（94）FPGA 两个触发器时序分析模型中，涉及到哪些参数？，面试必问（十八）（第19天）
(94)FPGA 两个触发器时序分析模型中,涉及到哪些参数?(第19天) 1 文章目录 1)文章目录 2)FPGA初级课程介绍 3)FPGA初级课程架构 4)FPGA 两个触发器时序分析模型中,涉及到 ...
JavaScript学习（八十八）—数组知识点总结，超详细！！！
JavaScript学习(八十八)-爆肝数组知识点总结,超详细!!! 每天都要进步一点点小王加油!!! 一.数组的概念所谓数组就是指内存中开辟出来的用来存储大量数据的连续的存储空间数组可以把一 ...
JavaScript学习（三十四）—事件委托
JavaScript学习(三十四)-事件委托 (一).什么是事件委托? 所谓的事件委托就是指将事件添加到祖先元素身上,依据事件冒泡的原理(就是指事件的执行顺序是从当前元素逐步扩展到祖先元素,直到扩展到 ...
JavaScript学习（二十八）—事件冒泡和事件捕获
JavaScript学习(二十八)-事件冒泡和事件捕获一.什么是事件流? 简单说,事件流就是指事件的执行顺序,他包含两种模式:事件冒泡.事件捕获. (一).事件冒泡最常用的一种模式,就是指事件的执 ...

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

0、题目

1、解题过程

2、遇到的问题

19、任务十八——事件委托、数组处理相关推荐

最新文章

热门文章