百度前端学院--斌斌学院--demo---4
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度前端学院--斌斌学院--demo---4相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 li{ 8 width: 50px; 9 height: 50px; 10 background-color: red; 11 float: left; 12 color: white; 13 font-size: 18px; 14 border: 1px solid #000; 15 list-style: none; 16 } 17 </style> 18 </head> 19 <body> 20 <input type="text" maxlength="50" id="in"></input> 21 <input type="button" value="左侧进" class="a" ></input> 22 <input type="button" value="右侧进" class="b" ></input> 23 <input type="button" value="左侧出" class="c" ></input> 24 <input type="button" value="右侧出" class="d" ></input> 25 <ul id="out"></ul> 26 </body> 27 <script> 28 var ins=document.getElementById("in"); 29 var out=document.getElementById("out"); 30 var leftin = document.getElementsByClassName("a")[0]; 31 var rightin = document.getElementsByClassName("b")[0]; 32 var leftout = document.getElementsByClassName("c")[0]; 33 var rightout = document.getElementsByClassName("d")[0]; 34 //插入 35 function insert(direction){ 36 if(ins.value===""){ 37 alert("内容为空呢，你说怎嘛办？"); 38 ins.focus(); 39 }else if(isNaN(ins.value)){ 40 alert("必须输入数字呢？"); 41 ins.value=""; 42 ins.focus(); 43 }else{ 44 var oli=document.createElement("li"); 45 oli.innerHTML=ins.value; 46 if(direction==="left"){ 47 out.insertBefore(oli,out.firstChild); 48 }else{ 49 out.appendChild(oli); 50 } 51 } 52 } 53 //删除 54 console.log(out); 55 console.log(out.childNodes.length); 56 function del(direction){ 57 if(out.childNodes.length<=0){ 58 alert("没有东西删除了。。。"); 59 return false; 60 }else{ 61 if(direction==="left"){ 62 alert("删除数字"+out.firstChild.innerHTML); 63 out.removeChild(out.firstChild); 64 }else{ 65 alert("删除数字"+out.lastChild.innerHTML); 66 out.removeChild(out.lastChild); 67 } 68 } 69 } 70 //点击操作 71 leftin.onclick=function(){ 72 insert("left"); 73 } 74 rightin.onclick=function(){ 75 insert("right"); 76 } 77 leftout.onclick=function(){ 78 del("left"); 79 } 80 rightout.onclick=function(){ 81 del("right"); 82 } 83 </script> 84 </html>
以上是关于百度前端学院--斌斌学院--demo---4的主要内容，如果未能解决你的问题，请参考以下文章