首页 > 代码库 > 任务四：基础JavaScript练习（一）

任务四：基础JavaScript练习（一）

2024-09-06 10:05:33   217人阅读

任务描述

  • 如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空
  • 有一个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>

 

任务四：基础JavaScript练习（一）


联系
我们