百度前端学院小斌学院任务四

2024年4月6日 183次阅读 来源: yulab

任务目的
学习与实践JavaScript的基本语法、语言特性
初步了解JavaScript的事件是什么
初步了解JavaScript中的DOM是什么
任务描述
如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空
有一个input输入框，以及4个操作按钮

点击”左侧入”，将input中输入的数字从左侧插入队列中；
点击”右侧入”，将input中输入的数字从右侧插入队列中；
点击”左侧出”，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
点击”右侧出”，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；
点击队列中任何一个元素，则该元素会被从队列中删除

任务注意事项
实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
请注意代码风格的整齐、优雅
代码中含有必要的注释
示例图仅为参考，不需要完全一致
需要考虑数字输入的合法性
建议不使用任何第三方库、框架

实现代码

<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
    <style> 
      .num {
        display:inline-block;
        border:1px solid black;
       }
    </style>
  </head>
<body>

  <input id = "input"/>
  <button id = "left-in">左侧入</button>
  <button id = "right-in">右侧入</button>
  <button id = "left-out">左侧出</button>
  <button id = "right-out">右侧出</button>
  <br/>
  <div id = "container">
  </div>
<script>
  
  var leftInBtn = document.querySelector("#left-in");
  var rightInBtn = document.querySelector("#right-in");
  var leftOutBtn = document.querySelector("#left-out");
  var rightOutBtn = document.querySelector("#right-out");
  var container = document.querySelector("#container");
  var input = document.querySelector("#input");
  var value = input.value;
  var children = container.children;
  input.addEventListener("change", function() {
    value = input.value;
  });
  leftInBtn.addEventListener("click", function() {
    container.insertAdjacentHTML("afterBegin", `<span class = "num">${value}</span>`);
  });
  rightInBtn.addEventListener("click", function() {
    container.insertAdjacentHTML("beforeEnd", `<span class = "num">${value}</span>`);
  });
  leftOutBtn.addEventListener("click", function() {
    
    container.removeChild(children[0]);
  });
  rightOutBtn.addEventListener("click", function() {
    container.removeChild(children[children.length - 1]);
  });
  container.addEventListener("click",function(e) {
    var target = e.target;
    container.removeChild(target);
 })
    
</script>
</body>
</html>
    原文作者：yulab
    原文地址: https://segmentfault.com/a/1190000009351187
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞