JS里的居民们5-数组(栈)

2018-12-09 11:19:51来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

编码1(栈顶在最右)

练习如何使用数组来实现栈,综合考虑使用数组的 push,pop,shift,unshift操作

基于代码,实现如按钮中描述的功能:

  • 实现如阅读材料中,队列的相关进栈、退栈、获取栈顶、判空的操作
  • 栈顶对应数组中最后一个元素
  • 进栈和退栈操作后,需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容,栈顶在最右侧,中间用 -> 连接(练习使用数组的join方法)
 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>JS里的居民们6-数组(栈-栈顶在右)</title>
 7 </head>
 8 
 9 <body>
10     <input id="stack-input" type="text">
11     <p id="stack-cont">栈内容:apple-&gt;pear</p>
12     <button id="push-btn">进栈</button>
13     <button id="pop-btn">退栈</button>
14     <button id="font-btn">打印栈顶元素内容</button>
15     <button id="empty-btn">判断栈是否为空</button>
16 
17     <script>
18         var stack = ["apple", "pear"];
19         var txt = document.getElementById("stack-input");
20         var stackcont = document.getElementById("stack-cont");
21         var pushbtn = document.getElementById("push-btn");
22         var popbtn = document.getElementById("pop-btn");
23         var fontbtn = document.getElementById("font-btn");
24         var emptybtn = document.getElementById("empty-btn");
25 
26         pushbtn.onclick = function () {
27             stack.unshift(txt.value);
28             stackcont.innerHTML = "栈内容:" + stack.join("-&gt");
29         }
30         popbtn.onclick = function () {
31             stack.shift();
32             stackcont.innerHTML = "栈内容:" + stack.join("-&gt");
33         }
34         fontbtn.onclick = function () {
35             stackcont.innerHTML = "栈内容:" + stack[stack.length - 1];
36         }
37         emptybtn.onclick = function () {
38             if (stack.length == 0) {
39                 stackcont.innerHTML = "栈内容:空";
40             } else {
41                 stackcont.innerHTML = "栈内容:不为空";
42             }
43         }
44     </script>
45 </body>
46 
47 </html>

编码2(栈顶在最左)

对上面练习进行小调整

基于代码,实现如按钮中描述的功能:

  • 实现如阅读材料中,队列的相关进栈、退栈、获取栈顶、判空的操作
  • 栈顶对应数组中第一个元素
  • 进栈和退栈操作后,需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容,栈顶在最左侧,中间用 -< 连接(练习使用数组的join方法)
 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>JS里的居民们7-数组(栈-栈顶在左)</title>
 7 </head>
 8 
 9 <body>
10     <input id="stack-input" type="text">
11     <p id="stack-cont">栈内容:apple-&gt;pear</p>
12     <button id="push-btn">进栈</button>
13     <button id="pop-btn">退栈</button>
14     <button id="font-btn">打印栈顶元素内容</button>
15     <button id="empty-btn">判断栈是否为空</button>
16 
17     <script>
18         var stack = ["apple", "pear"];
19         var txt = document.getElementById("stack-input");
20         var stackcont = document.getElementById("stack-cont");
21         var pushbtn = document.getElementById("push-btn");
22         var popbtn = document.getElementById("pop-btn");
23         var fontbtn = document.getElementById("font-btn");
24         var emptybtn = document.getElementById("empty-btn");
25 
26         pushbtn.onclick = function () {
27             stack.push(txt.value);
28             stackcont.innerHTML = "栈内容:" + stack.join("&lt-");
29         }
30         popbtn.onclick = function () {
31             stack.pop();
32             stackcont.innerHTML = "栈内容:" + stack.join("&lt-");
33         }
34         fontbtn.onclick = function () {
35             stackcont.innerHTML = "栈内容:" + stack[0];
36         }
37         emptybtn.onclick = function () {
38             if (stack.length == 0) {
39                 stackcont.innerHTML = "栈内容:空";
40             } else {
41                 stackcont.innerHTML = "栈内容:不为空";
42             }
43         }
44     </script>
45 </body>
46 
47 </html>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS中forEach的用法

下一篇:图学ES6-5.正则的扩展