编码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->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("->"); 29 } 30 popbtn.onclick = function () { 31 stack.shift(); 32 stackcont.innerHTML = "栈内容：" + stack.join("->"); 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->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("<-"); 29 } 30 popbtn.onclick = function () { 31 stack.pop(); 32 stackcont.innerHTML = "栈内容：" + stack.join("<-"); 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>