<!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="左側(cè)入">
????<input?type="button"??id?=?"right_in"?value="右側(cè)入">
????<input?type="button"?value="左側(cè)出"?id="left_out">
????<input?type="button"?value="右側(cè)出"?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>這個(gè)效果還有不有好辦法？再添加一個(gè)點(diǎn)擊創(chuàng)建出來(lái)的數(shù)字，就會(huì)將其刪除，貼代碼，加注釋，謝謝
js的趣味題
西蘭花偉大炮
2017-04-24 13:15:10