<!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>
这个效果还有不有好办法?再添加一个点击创建出来的数字,就会将其删除,贴代码,加注释,谢谢
相关分类