Code 1 (stack top right)
Practice how to use array to implement stack, and comprehensively consider the push, pop, shift and unshift operations of array
Based on the code, realize the functions described in the button:
- For example, in reading materials, the operation of queue related to stack entry, stack exit, stack top acquisition and empty judgment is implemented
- The top of the stack corresponds to the last element in the array
- After stack in and stack out operations, you need to update and display the contents of the stack in the p tag with the id of stack cont. the top of the stack is on the far right, and in the middle, use - > connect (practice using the join method of array)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>JS Residents of 6-array(Stack-The top of the stack is on the right.)</title> 7 </head> 8 9 <body> 10 <input id="stack-input" type="text"> 11 <p id="stack-cont">Stack contents: apple->pear</p> 12 <button id="push-btn">Enter stack</button> 13 <button id="pop-btn">Retire</button> 14 <button id="font-btn">Print stack top element content</button> 15 <button id="empty-btn">Judge whether the stack is empty</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 contents:" + stack.join("->"); 29 } 30 popbtn.onclick = function () { 31 stack.shift(); 32 stackcont.innerHTML = "Stack contents:" + stack.join("->"); 33 } 34 fontbtn.onclick = function () { 35 stackcont.innerHTML = "Stack contents:" + stack[stack.length - 1]; 36 } 37 emptybtn.onclick = function () { 38 if (stack.length == 0) { 39 stackcont.innerHTML = "Stack content: empty"; 40 } else { 41 stackcont.innerHTML = "Stack content: not empty"; 42 } 43 } 44 </script> 45 </body> 46 47 </html>
Code 2 (stack top left)
Make small adjustments to the above exercises
Based on the code, realize the functions described in the button:
- For example, in reading materials, the operation of queue related to stack entry, stack exit, stack top acquisition and empty judgment is implemented
- The top of the stack corresponds to the first element in the array
- After stack in and stack out operations, you need to update and display the contents of the stack in the p tag with the id of stack cont. the top of the stack is on the left, and the middle is connected with - < connection (practice using the join method of array)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>JS Residents of 7-array(Stack-The top of the stack is on the left.)</title> 7 </head> 8 9 <body> 10 <input id="stack-input" type="text"> 11 <p id="stack-cont">Stack contents: apple->pear</p> 12 <button id="push-btn">Enter stack</button> 13 <button id="pop-btn">Retire</button> 14 <button id="font-btn">Print stack top element content</button> 15 <button id="empty-btn">Judge whether the stack is empty</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 contents:" + stack.join("<-"); 29 } 30 popbtn.onclick = function () { 31 stack.pop(); 32 stackcont.innerHTML = "Stack contents:" + stack.join("<-"); 33 } 34 fontbtn.onclick = function () { 35 stackcont.innerHTML = "Stack contents:" + stack[0]; 36 } 37 emptybtn.onclick = function () { 38 if (stack.length == 0) { 39 stackcont.innerHTML = "Stack content: empty"; 40 } else { 41 stackcont.innerHTML = "Stack content: not empty"; 42 } 43 } 44 </script> 45 </body> 46 47 </html>