任务描述
如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空
有一个input输入框，以及4个操作按钮
点击"左侧入"，将input中输入的数字从左侧插入队列中；
点击"右侧入"，将input中输入的数字从右侧插入队列中；
点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；
点击队列中任何一个元素，则该元素会被从队列中删除
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.content{
width: 800px;
height: 500px;
margin: 50px auto;
border-radius: 10px;
background: #ccc;
overflow: hidden;
}
.content input{
display: block;
height: 30px;
width: 300px;
margin: 50px auto;
}
.btn{
display: flex;
justify-content: space-around;
}
.btn button{
height: 40px;
width: 100px;
}
#list{
display: flex;
margin:50px auto;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
justify-content: space-around;
margin-top:50px ;
}
#list li{
height: 50px;
width: 50px;
line-height: 50px;
background: pink;
color: #fff;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
<input type="" name="input" id="input" value="" />
<div class="btn">
<button>左侧插入</button>
<button>右侧插入</button>
<button>左侧移除</button>
<button>右侧移除</button>
</div>
<ul id="list">
</ul>
</div>
<script type="text/javascript">
var data=[5,2,1];
var list=document.getElementById("list");
var int=document.getElementById("input");
var btn=document.querySelectorAll('.btn button');
btn.forEach(function(el,index){
el.addEventListener('click',function(){
var val=int.value;
if(index==0){
data.unshift(val);
}
if(index==1){
data.push(val);
}
if(index==2){
data.shift();
}
if(index==3){
data.pop();
}
render();
})
})
function render(){
var html='';
data.forEach(function(el){
html+='<li>'+el+'</li>'
})
list.innerHTML=html;
var lis=list.querySelectorAll('li');
lis.forEach(function(ev,index){
ev.addEventListener('click',function(){
list.removeChild(ev);
data.splice(index,1);
})
})
}
render();
</script>
</body>
</html>
主要考察知识点:数组的添加与删除 dom节点的删除
