任务描述
- 如图,模拟一个队列,队列的每个元素是一个数字,初始队列为空
- 有一个input输入框,以及4个操作按钮
- 点击"左侧入",将input中输入的数字从左侧插入队列中;
- 点击"右侧入",将input中输入的数字从右侧插入队列中;
- 点击"左侧出",读取并删除队列左侧第一个元素,并弹窗显示元素中数值;
- 点击"右侧出",读取并删除队列又侧第一个元素,并弹窗显示元素中数值;
- 点击队列中任何一个元素,则该元素会被从队列中删除
先简单得写一个input和4个button
<input type="number" name="num" id="num" value="" /> <button id="unShift">左侧入</button> <button id="push">右侧入</button> <button id="shift">左侧出</button> <button id="pop">右侧出</button>
然后建立队列,我的想法是做一个无序列表,然后用css把li底层改变成红色正方形。
list-style-type: none//取消黑点
Float:left//可以让li平行
将样式改变后,我们开始绑定事件。
先撸下思路:
要将li里面的队列可以进行修改,设定里面的数据是一个数据,4个按钮可以对这些数据进行修改,然后再导出修改后的数据。
1. 获取页面上的data ,即li 的innerHtml;
2. 给按钮绑定事件。事件里面函数分别是对数据的处理。
3. 数据处理好之后,显示新的队列。
第一步:获取data数组
var data =[]; var li =document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ data.push(li[i].innerHTML); }
第二步:绑定不同的事件
var leftIn = document.getElementById("unShift"); leftIn.onclick = function(){ var num = document.getElementById("num").value; data.unshift(num); ……. }
不同事件对应的函数,可以参考w3c的数组对象,不细说
http://www.w3school.com.cn/jsref/jsref_obj_array.asp
第三步:处理好数据后,清理原来的li,显示出新的li
function removeAllLi(){ var _li = ul.getElementsByTagName('li'); for(var i=_li.length-1;i>=0;i--){ ul.removeChild(_li[i]); } } function showLi(data){ removeAllLi(); for(var j=0;j<data.length;j++){ var liCreate = document.createElement("li"); liCreate.innerHTML = data[j]; document.getElementsByTagName("ul")[0].appendChild(liCreate); } }
四个按钮完成后,我们进行最后一步,点击li可以清除对应的li
function Del(){ for(var i = 0;i<li.length;i++){ li[i].index = i; li[i].onclick = function(){ data.splice(this.index,1); showLi(data); } } } ul.onclick = function(){ Del(); }
完成