js数组基础练习

任务描述

• 如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空
• 有一个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();

      }

 

完成

完整代码：https://github.com/moeeliu/ife/blob/master/js4.html