任务五：基础JavaScript练习（二）

最新推荐文章于 2020-10-16 14:48:33 发布

weixin_30522095

最新推荐文章于 2020-10-16 14:48:33 发布

阅读量186

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sunmaer/p/6486342.html

版权

任务描述

基于上一任务
限制输入的数字在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>

转载于:https://www.cnblogs.com/sunmaer/p/6486342.html

weixin_30522095

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
任务五：基础JavaScript练习（二）

任务描述基于上一任务限制输入的数字在10-100队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示队列展现方式变化如图，直接用高度表示数字大小实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来 1 <!DOCTYPE> 2 <html> 3 <head>...
复制链接

扫一扫