百度前端学院小斌学院使命四

2024年5月10日 161次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞