编码1（栈顶在最右）

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

基于代码，实现如按钮中描述的功能：

  • 实现如阅读材料中，队列的相关进栈、退栈、获取栈顶、判空的操作
  • 栈顶对应数组中最后一个元素
  • 进栈和退栈操作后，需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容，栈顶在最右侧，中间用 -> 连接（练习使用数组的join方法）
 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <  charset=\"utf-8\" />
 6     < >JS里的居民们6-数组(栈-栈顶在右)</ >
 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     < >
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.  = function () {
27             stack.unshift(txt.value);
28             stackcont.innerHTML = \"栈内容：\" + stack.join(\"-&gt\");
29         }
30         popbtn.  = function () {
31             stack.shift();
32             stackcont.innerHTML = \"栈内容：\" + stack.join(\"-&gt\");
33         }
34         fontbtn.  = function () {
35             stackcont.innerHTML = \"栈内容：\" + stack[stack.length - 1];
36         }
37         emptybtn.  = function () {
38             if (stack.length == 0) {
39                 stackcont.innerHTML = \"栈内容：空\";
40             } else {
41                 stackcont.innerHTML = \"栈内容：不为空\";
42             }
43         }
44     </ >
45 </body>
46 
47 </html>

编码2（栈顶在最左）

对上面练习进行小调整

基于代码，实现如按钮中描述的功能：

  • 实现如阅读材料中，队列的相关进栈、退栈、获取栈顶、判空的操作
  • 栈顶对应数组中第一个元素
  • 进栈和退栈操作后，需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容，栈顶在最左侧，中间用 -< 连接（练习使用数组的join方法）
 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <  charset=\"utf-8\" />
 6     < >JS里的居民们7-数组(栈-栈顶在左)</ >
 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     < >
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.  = function () {
27             stack.push(txt.value);
28             stackcont.innerHTML = \"栈内容：\" + stack.join(\"&lt-\");
29         }
30         popbtn.  = function () {
31             stack.pop();
32             stackcont.innerHTML = \"栈内容：\" + stack.join(\"&lt-\");
33         }
34         fontbtn.  = function () {
35             stackcont.innerHTML = \"栈内容：\" + stack[0];
36         }
37         emptybtn.  = function () {
38             if (stack.length == 0) {
39                 stackcont.innerHTML = \"栈内容：空\";
40             } else {
41                 stackcont.innerHTML = \"栈内容：不为空\";
42             }
43         }
44     </ >
45 </body>
46 
47 </html>

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章