ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-03-15 22:04:33  阅读:204  来源: 互联网

标签:function 小斌 container 队列 value 学院 var input 百度


任务目的
学习与实践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>

标签:function,小斌,container,队列,value,学院,var,input,百度
来源: https://www.cnblogs.com/jlfw/p/12500382.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有