-
如图,模拟一个队列,队列的每个元素是一个数字,初始队列为空
-
有一个input输入框,以及4个操作按钮
- 点击"左侧入",将input中输入的数字从左侧插入队列中;
- 点击"右侧入",将input中输入的数字从右侧插入队列中;
- 点击"左侧出",读取并删除队列左侧第一个元素,并弹窗显示元素中数值;
- 点击"右侧出",读取并删除队列又侧第一个元素,并弹窗显示元素中数值;
-
点击队列中任何一个元素,则该元素会被从队列中删除
-
需要考虑数字输入的合法性
问题出在:我要怎么用js把得到的数显示到页面或从页面删除数字
原来要在html里面加ul啊。。。。 这样 ---嗯?不对 ,还有问题 好吧,貌似,好像,,莫名其妙的解决了
放代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>获取数值并插入</title>
<style type="text/css">
li{
width:40px;
height:40px;
list-style: none;
margin:10px;
display: inline-block;
background: red;
padding:10px;
color:#fff;
}
</style>
<script type="text/javascript">
var arr=[];
function show(arr){
var ul=document.getElementsByTagName("ul")[0];//获取ul标签的第一个数值
var li=document.getElementsByTagName("li");
for(var i=li.length-1;i>=0;i--){
ul.removeChild(li[i]);//遍历删除li标签内容
}
for(var i=0;i<arr.length;i++){
var newli=document.createElement("li");
newli.innerHTML=arr[i];
ul.appendChild(newli);
}
}
function left_in(){
arr.unshift(document.getElementById('number').value);
show(arr);
}
function right_in(){
arr.push(document.getElementById('number').value);
show(arr);
}
function left_out(){
arr.shift();
show(arr);
}
function right_out(){
arr.pop();
show(arr);
}
</script>
</head>
<body>
<input type="number" id="number" name="input" placeholder="请输入数值" />
<input type="button" value="左侧入" id="left_in" onclick="left_in() " />
<input type="button" value="右侧入" id="right_in" onclick="right_in()" />
<input type="button" value="左侧出" id="left_out" onclick="left_out()" />
<input type="button" value="右侧出" id="right_out" onclick="right_out()" />
<ul>
<li>1</li>
</ul>
</body>
</html>
复制代码