HTML队列操作示例-优快云博客

本文链接：https://blog.youkuaiyun.com/ymc_webpack/article/details/60332660

根据指令添加删除

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>html17</title>
  <style>
    #content li{
      display: inline-block;
      width: 40px;
      height: 40px;
      margin: 10px;
      background: #08c;
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 40px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <form action="">
    <input type="text" id="num">
    <input type="button" value="左侧入" class="btn">
    <input type="button" value="右侧入" class="btn" >
    <input type="button" value="左侧出" class="btn" >
    <input type="button" value="右侧出"  class="btn">
  </form>
  <div id="content">
    <ul></ul>
  </div>
</body>
<script type = "text/javascript" >

var num = document.getElementById('num');
var btn = document.getElementsByClassName('btn');
var ul =  document.getElementsByTagName('ul')[0];
//左侧入
    btn[0].onclick = function(){
      if (num.value.length <= 0) {
        alert('输入为空');
        return false;
      }
      var newNode = document.createElement('li');
      newNode.innerHTML = num.value;
      ul.insertBefore(newNode, ul.firstChild);
      num.value = null;
    }
    btn[1].onclick = function () {
      if (num.value.length <= 0) {
        alert('输入为空');
        return false;
      }
      var newNode = document.createElement('li');
      newNode.innerHTML = num.value;
      ul.appendChild(newNode);
      num.value = null;
    }
    btn[2].onclick = function () {
      if (ul.hasChildNodes()) {
        alert(ul.firstChild.innerHTML);
        ul.removeChild(ul.firstChild);
      } else {
        alert('队列为空');
        return false;
      }
    }
    btn[3].onclick = function () {
      if (ul.hasChildNodes()) {
        alert(ul.lastChild.innerHTML);
        ul.removeChild(ul.lastChild);
      } else {
        alert('队列为空');
        return false;
      }
    }
    ul.onmouseover = function () {
      var li = ul.getElementsByTagName('li');
      for (var i in li) {
        li[i].index = i;
        li[i].onclick = function () {
          ul.removeChild(ul.childNodes[this.index]);
        }
      }
    }
</script>
</html>

模拟队列