任务目的
学习与实践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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。