百度前端学院任务四：基础JavaScript练习（一）

最新推荐文章于 2019-10-30 18:19:19 发布

Jade_feng

最新推荐文章于 2019-10-30 18:19:19 发布

阅读量813

点赞数 1

本文链接：https://blog.csdn.net/Jade_feng/article/details/66477984

版权

如图

实现的功能：

模拟一个队列，队列的每个元素是一个数字，初始队列为空
有一个input输入框，以及4个操作按钮
- 点击"左侧入"，将input中输入的数字从左侧插入队列中；
- 点击"右侧入"，将input中输入的数字从右侧插入队列中；
- 点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
- 点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；
点击队列中任何一个元素，则该元素会被从队列中删除

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排队</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{padding:10px;}
.UL {list-style-type:none;}
.UL li {float:left;background:red;margin:5px 12px 5px -1px;height:40px;width:40px;
font-weight:bold;color:white;line-height: 40px;text-align:center;}
</style>
</head>
<body>
<input type="number" name="num" id="num" value="" />
<button id="left_in">左侧入</button>
<button id="right_in">右侧入</button>
<button id="left_out">左侧出</button>
<button id="right_out">右侧出</button>

<ul class="UL">
<li>10</li>
<li>3</li>
<li>7</li>
<li>12</li>
<li>11</li>
<li>30</li>
</ul>
<script type="text/javascript">
//第一步：先取出li的值，将其转化为数组
var arrLi=[];
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
var liV=lis[i].innerHTML;
arrLi.push(parseInt(liV));
}
var left_in=document.getElementById("left_in");
var right_in=document.getElementById("right_in");
var left_out=document.getElementById("left_out");
var right_out=document.getElementById("right_out");
var ALi=document.getElementsByTagName("ul")[0];

//点击队列中任何一个元素，则该元素会被从队列中删除
function Del(){
for(var i=0;i<lis.length;i++){
lis[i].index= i; //把每个li的值的下标储存在i里
lis[i].οnclick=function(){
arrLi.splice(this.index,1);
showLi(arrLi);
}
}
}
//显示在页面中的列表
function showLi(arrLi){
removeALLLi();
for(var j=0;j<arrLi.length;j++){
var showLi=document.createElement("li");
showLi.innerHTML=arrLi[j];
document.getElementsByTagName("ul")[0].appendChild(showLi);
}
}
//删除原来列表中的内容(从后面的数一直删到第一个，直到删完)
function removeALLLi(){
var _li=document.getElementsByTagName("li"); //或者var _li=ALit.getElementsByTagName("li");
for(var k=_li.length-1;k>=0;k--){
ALi.removeChild(_li[k]);
}
}
//点击"左侧入"，将input中输入的数字从左侧插入队列中
left_in.οnclick=function(){
var in_num=document.getElementById("num").value;
if(in_num){
arrLi.unshift(parseInt(in_num));
}
showLi(arrLi);
};
//点击"右侧入"，将input中输入的数字从左侧插入队列中
right_in.οnclick=function(){
var in_num=document.getElementById("num").value;
if(in_num){
arrLi.push(parseInt(in_num));
}
showLi(arrLi);
};
//点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
left_out.οnclick=function(){
arrLi.shift();
showLi(arrLi);
};
//点击"右侧出"，读取并删除队列右侧第一个元素，并弹窗显示元素中数值
right_out.οnclick=function(){
arrLi.pop();
showLi(arrLi);
};
ALi.οnclick=function(){
Del();
}
</script>
</body>
</html>