JS里的居民們5-數組(棧)_ZenDei技術網路在線

JS里的居民們5-數組(棧)

-Advertisement-

編碼1（棧頂在最右）練習如何使用數組來實現棧，綜合考慮使用數組的 push，pop，shift，unshift操作基於代碼，實現如按鈕中描述的功能：實現如閱讀材料中，隊列的相關進棧、退棧、獲取棧頂、判空的操作棧頂對應數組中最後一個元素進棧和退棧操作後，需要在 id 為 stack-cont ...

編碼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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

從零學習Fluter(二):win10上環境搭建已經模擬器和真機調試

今天呢，又繼續看了flutter 弗拉特的東西，絕的這個東西絕對是比ReactNative更高一層次的，在2018年12月5好，flutter的第一個stale1.0發佈了，我們在GitHub上可以看到，之前在github上只有dev，分支和beta分支，許多用flutter開發的app都是用的b ...
如果你的公司還沒有企業級班車應用，把這篇文章轉給你老闆

本文由雲+社區發表越來越多的大型企業都開始為員工提供班車，解決員工上下班出行的問題，甚至有些高新技術園區也組織了園區車輛共用的一些新的出行方案。期間，企業從早期員工提供優質的班車服務，到提升班車的管理水平、優化車輛使用成本逐漸成為了主線。那麼如何做到這些呢？企業級班車應用到底怎麼做呢？首先，我們需 ...
移動端觸摸

var div=document.querySelector("div"); var startX,startY,moveX,moveY,distanceX,distanceY; // 開始觸摸 div.addEventListener("touchstart",function(e){ start... ...
記錄常用的git命令

之前的公司都是用svn的，現在的公司用git了，所以現在記錄一下所用到的git命令，方便以後查看！ git 常用命令 git add git add 命令可將該文件添加到緩存 git status git status 命令用於查看項目的當前狀態。 git commit 使用 git add 命令將 ...
Bootstrap -- 網格系統、排版樣式類、 <blockquote>、 <abbr> 元素

Bootstrap: 網格系統、排版樣式類、 blockquote、 abbr元素 ...
js中的同步與非同步的問題

前言近來，總是忙於拿js寫一些案例，因為是小白，並沒有什麼豐富的經驗，對各個知識點把握也不是很全面，寫起來真的是...一言難盡，太痛苦了= =、尤其是在寫一些輪播的時候，裡面需要用到定時器，而一旦用了定時器，就要考慮js中一個重要無比的知識點！沒錯，就是同步與非同步，這問題困擾了我很長時間，經過幾番 ...
變數名提升，閉包的功能和使用

一、變數名的提升 JavaScript運行中會經過代碼的預解析和代碼執行過程。 var num=123; function foo(){ console.log(num); //undefined var num=456; console.log(num); //456 } foo(); 代碼預解析 ...
圖學ES6-5.正則的擴展

...