任务描述
- 如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空
- 有一个input输入框，以及4个操作按钮点击队列中任何一个元素，则该元素会被从队列中删除
- 点击"左侧入"，将input中输入的数字从左侧插入队列中；
- 点击"右侧入"，将input中输入的数字从右侧插入队列中；
- 点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
- 点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>IFE JavaScript Task 04</title> 6 <style> 7 span { 8 display: inline-block; 9 margin: 10px 5px; 10 padding: 0px 10px; 11 height: 30px; 12 line-height: 30px; 13 background-color: red; 14 cursor: pointer; 15 } 16 </style> 17 </head> 18 <body> 19 20 <input type="text" id="num"> 21 <button id="left-in">左侧入</button> 22 <button id="right-in">右侧入</button> 23 <button id="left-out">左侧出</button> 24 <button id="right-out">右侧出</button> 25 26 <!-- 数字队列 --> 27 <div id="queue"> 28 29 </div> 30 31 <script type="text/javascript"> 32 33 /** 34 * leftIn方法 35 * 点击"左侧入"，将input中输入的数字从左侧插入队列中 36 */ 37 function leftIn(queue) { 38 var num = document.getElementById("num").value; 39 if(checkInput(num)) { 40 var span = document.createElement("span") 41 span.innerHTML = num; 42 43 //动态生成的元素在元素生成的时候绑定事件或者利用事件委托，事件委托性能更好 44 // span.onclick = function() {alert(this.innerHTML)}; 45 var spanList = queue.childNodes; 46 queue.insertBefore(span,spanList[0]); 47 } 48 } 49 50 /** 51 * rightIn方法 52 * 点击"右侧入"，将input中输入的数字从右侧插入队列中 53 */ 54 function rightIn(queue) { 55 var num = document.getElementById("num").value; 56 if(checkInput(num)) { 57 var span = document.createElement("span") 58 span.innerHTML = num; 59 60 //动态生成的元素在元素生成的时候绑定事件或者利用事件委托，事件委托性能更好 61 // span.onclick = function() {alert(this.innerHTML)}; 62 63 queue.appendChild(span); 64 } 65 } 66 67 /** 68 * leftOut方法 69 * 点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值 70 */ 71 function leftOut(queue) { 72 var childs = queue.childNodes; 73 alert(childs[0].innerHTML);//先显示元素中的数值，因为NodeList具有时效性 74 queue.removeChild(childs[0]); 75 } 76 77 /** 78 * rightOut方法 79 * 点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值 80 */ 81 function rightOut(queue) { 82 var childs = queue.childNodes; 83 alert(childs[childs.length-1].innerHTML);//先显示元素中的数值，因为NodeList具有时效性 84 queue.removeChild(childs[childs.length-1]); 85 } 86 87 /** 88 * 输入验证 89 * 输入不能为空，而且只能是整数 90 */ 91 function checkInput(num) { 92 reg=/^[-+]?d*$/; //整数的正则表达式 93 if(num == "") { 94 alert("输入不能为空！"); 95 return false; 96 }else if(!reg.test(num)) { 97 alert("只能输入整数！"); 98 return false; 99 }else return true; 100 } 101 102 103 function init() { 104 105 var queue = document.getElementById("queue"); 106 107 document.getElementById("left-in").onclick = function() { 108 leftIn(queue); 109 }; 110 document.getElementById("right-in").onclick = function() { 111 rightIn(queue); 112 }; 113 document.getElementById("left-out").onclick = function() { 114 leftOut(queue); 115 }; 116 document.getElementById("right-out").onclick = function() { 117 rightOut(queue); 118 }; 119 120 /** 121 * deleteClick方法 122 * 点击队列中任何一个元素，则该元素会被从队列中删除 123 * 动态生成的节点绑定事件需要利用事件委托原理 124 */ 125 document.getElementById("queue").onclick = function( e ) { 126 e = e || window.event; 127 var t = e.target || e.srcElement; //t:目标对象 128 var tagName = t.tagName; //tagName标签名称 129 if( tagName == 'SPAN' ) { 130 queue.removeChild(t); 131 } 132 } 133 } 134 135 init(); 136 </script> 137 </body> 138 </html>