任务描述
- 基于上一任务
- 限制输入的数字在10-100
- 队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
- 队列展现方式变化如图，直接用高度表示数字大小
- 实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>IFE JavaScript Task 05</title> 6 <style> 7 span { 8 display: inline-block; 9 margin: 10px 5px; 10 padding: 0px 10px; 11 background-color: red; 12 cursor: pointer; 13 } 14 </style> 15 </head> 16 <body> 17 18 <input type="text" id="num"> 19 <button id="left-in">左侧入</button> 20 <button id="right-in">右侧入</button> 21 <button id="left-out">左侧出</button> 22 <button id="right-out">右侧出</button> 23 <button id="sort">排序</button> 24 25 <!-- 数字队列 --> 26 <div id="queue"></div> 27 28 <script type="text/javascript"> 29 30 /** 31 * leftIn方法 32 * 点击"左侧入"，将input中输入的数字从左侧插入队列中 33 */ 34 function leftIn(queue) { 35 var num = document.getElementById("num").value; 36 if(checkInput(num)) { 37 var span = document.createElement("span") 38 span.style.height = num; 39 //动态生成的元素在元素生成的时候绑定事件或者利用事件委托，事件委托性能更好 40 // span.onclick = function() {alert(this.innerHTML)}; 41 var spanList = queue.childNodes; 42 if(spanList.length > 60) { 43 alert("队列元素数量最多为60个！"); 44 }else { 45 queue.insertBefore(span,spanList[0]); 46 } 47 48 } 49 } 50 51 /** 52 * rightIn方法 53 * 点击"右侧入"，将input中输入的数字从右侧插入队列中 54 */ 55 function rightIn(queue) { 56 var num = document.getElementById("num").value; 57 if(checkInput(num)) { 58 var span = document.createElement("span") 59 span.style.height = num; 60 61 //动态生成的元素在元素生成的时候绑定事件或者利用事件委托，事件委托性能更好 62 // span.onclick = function() {alert(this.innerHTML)}; 63 64 var spanList = queue.childNodes; 65 if(spanList.length > 60) { 66 alert("队列元素数量最多为60个！"); 67 }else { 68 queue.appendChild(span); 69 } 70 } 71 } 72 73 /** 74 * leftOut方法 75 * 点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值 76 */ 77 function leftOut(queue) { 78 var childs = queue.childNodes; 79 alert(childs[0].innerHTML);//先显示元素中的数值，因为NodeList具有时效性 80 queue.removeChild(childs[0]); 81 } 82 83 /** 84 * rightOut方法 85 * 点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值 86 */ 87 function rightOut(queue) { 88 var childs = queue.childNodes; 89 alert(childs[childs.length-1].innerHTML);//先显示元素中的数值，因为NodeList具有时效性 90 queue.removeChild(childs[childs.length-1]); 91 } 92 93 /** 94 * 输入验证 95 * 输入不能为空，而且只能是实数 96 */ 97 function checkInput(num) { 98 reg= /^-?d+.?d*$/; //实数的正则表达式 99 if(num == "") { 100 alert("输入不能为空！"); 101 return false; 102 }else if(!reg.test(num)) { 103 alert("只能输入10-100内的实数！"); 104 return false; 105 }else if(reg.test(num) && (num<10 || num>100)) { 106 alert("只能输入10-100内的实数！"); 107 return false; 108 }else return true; 109 } 110 111 /** 112 * 清空Input表单 113 */ 114 function emptyInput(input) { 115 input.value = ""; 116 } 117 118 /** 119 * 对列排序函数 120 * 按照冒泡排序进行排序 121 */ 122 function bubbleSort(queue) { 123 var childs = queue.childNodes; 124 var flag = false; //记录是否存在交换，如果没有交换则退出 125 126 for(var i=0;i<childs.length;i++) { 127 128 for(var j=0;j<childs.length-1;j++) { 129 130 if(childs[j].style.height>childs[j+1].style.height) { 131 flag = true; 132 var height = childs[j].style.height; 133 childs[j].style.height = childs[j+1].style.height; 134 childs[j+1].style.height = height; 135 } 136 137 } 138 if (!flag) break; //上一趟比较中不存在交换，则退出排序 139 } 140 } 141 142 143 function init() { 144 145 var queue = document.getElementById("queue"); 146 var input = document.getElementById("num");//获取表单元素 147 148 document.getElementById("left-in").onclick = function() { 149 leftIn(queue); 150 emptyInput(input) 151 }; 152 document.getElementById("right-in").onclick = function() { 153 rightIn(queue); 154 emptyInput(input) 155 }; 156 document.getElementById("left-out").onclick = function() { 157 leftOut(queue); 158 }; 159 document.getElementById("right-out").onclick = function() { 160 rightOut(queue); 161 }; 162 163 document.getElementById("sort").onclick = function() { 164 bubbleSort(queue); 165 }; 166 167 /** 168 * deleteClick方法 169 * 点击队列中任何一个元素，则该元素会被从队列中删除 170 * 动态生成的节点绑定事件需要利用事件委托原理 171 */ 172 document.getElementById("queue").onclick = function( e ) { 173 e = e || window.event; 174 var t = e.target || e.srcElement; //t:目标对象 175 var tagName = t.tagName; //tagName标签名称 176 if( tagName == 'SPAN' ) { 177 queue.removeChild(t); 178 } 179 } 180 } 181 182 init(); 183 </script> 184 </body> 185 </html>