<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ctr-btn{
font-size: 16px;
color: limegreen;
padding: 5px 10px;
border-radius: 3px;
border: 1px solid limegreen;
margin-right: 10px;
}
.ctr-btn:hover{
background-color:limegreen;
color: #fff;
}
.littlebox{
display: inline-block;
padding: 20px;
border: 2px solid red;
color: red;
font-size: 20px;
margin-right: 10px;
}
</style>
</head>
<body>
<input type="text" id="put_num" value="520"/>
<input type="button" id = "left_in" value="左侧入">
<input type="button" id = "right_in" value="右侧入">
<input type="button" value="左侧出" id="left_out">
<input type="button" value="右侧出" id="right_out">
<div id="container"></div>
<script>
function $(id){
return document.getElementById(id);
}
//alert($("put_num").value);
var rootArr = [];
$("left_in").addEventListener("click",function(){
var ctr_num = 1;
var put_num = $("put_num").value;
generateOneNum(rootArr,ctr_num,put_num)
$("put_num").value = "";
})
$("right_in").addEventListener("click",function(){
var ctr_num = 2;
var put_num = $("put_num").value;
generateOneNum(rootArr,ctr_num,put_num)
$("put_num").value = "";
})
$("left_out").addEventListener("click",function(){
var ctr_num = 3;
var put_num = $("put_num").value;
generateOneNum(rootArr,ctr_num,put_num)
$("put_num").value = "";
})
$("right_out").addEventListener("click",function(){
var ctr_num = 4;
var put_num = $("put_num").value;
generateOneNum(rootArr,ctr_num,put_num)
$("put_num").value = "";
})
function generateOneNum(rootArr,ctr_num,put_num){
switch(ctr_num){
case 1:
rootArr.unshift(put_num);
renderToScreen(rootArr);
break;
case 2:
rootArr.push(put_num);
renderToScreen(rootArr);
break;
case 3:
rootArr.shift(put_num);
renderToScreen(rootArr);
break;
case 4:
rootArr.pop(put_num);
renderToScreen(rootArr);
break;
}
};
function renderToScreen(rootArr){
var container = $("container");
document.body.removeChild(container);
var con = document.createElement(div);
con.id = "container";
con.className = "container";
for(var i = 0;i < rootArr.length;i++){
var div = document.createElement('div');
div.className = "littlebox";
div.innerHTML = rootArr[i];
con.appendChild(div);
}
document.body.appendChild(con);
}
</script>
</body>
</html>这个效果还有不有好办法？再添加一个点击创建出来的数字，就会将其删除，贴代码，加注释，谢谢
添加回答
举报
0/150
提交
取消