编码1（栈顶在最右）

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

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

  • 实现如阅读材料中，队列的相关进栈、退栈、获取栈顶、判空的操作
  • 栈顶对应数组中最后一个元素
  • 进栈和退栈操作后，需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容，栈顶在最右侧，中间用 -> 连接（练习使用数组的join方法）
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title>JS里的居民们6-数组(栈-栈顶在右)</title>

 </head>

 <body>

     <input id="stack-input" type="text">

     <p id="stack-cont">栈内容：apple-&gt;pear</p>

     <button id="push-btn">进栈</button>

     <button id="pop-btn">退栈</button>

     <button id="font-btn">打印栈顶元素内容</button>

     <button id="empty-btn">判断栈是否为空</button>

     <script>

         var stack = ["apple", "pear"];

         var txt = document.getElementById("stack-input");

         var stackcont = document.getElementById("stack-cont");

         var pushbtn = document.getElementById("push-btn");

         var popbtn = document.getElementById("pop-btn");

         var fontbtn = document.getElementById("font-btn");

         var emptybtn = document.getElementById("empty-btn");

         pushbtn.onclick = function () {

             stack.unshift(txt.value);

             stackcont.innerHTML = "栈内容：" + stack.join("-&gt");

         }

         popbtn.onclick = function () {

             stack.shift();

             stackcont.innerHTML = "栈内容：" + stack.join("-&gt");

         }

         fontbtn.onclick = function () {

             stackcont.innerHTML = "栈内容：" + stack[stack.length - 1];

         }

         emptybtn.onclick = function () {

             if (stack.length == 0) {

                 stackcont.innerHTML = "栈内容：空";

             } else {

                 stackcont.innerHTML = "栈内容：不为空";

             }

         }

     </script>

 </body>

 </html>

编码2（栈顶在最左）

对上面练习进行小调整

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

  • 实现如阅读材料中，队列的相关进栈、退栈、获取栈顶、判空的操作
  • 栈顶对应数组中第一个元素
  • 进栈和退栈操作后，需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容，栈顶在最左侧，中间用 -< 连接（练习使用数组的join方法）
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title>JS里的居民们7-数组(栈-栈顶在左)</title>

 </head>

 <body>

     <input id="stack-input" type="text">

     <p id="stack-cont">栈内容：apple-&gt;pear</p>

     <button id="push-btn">进栈</button>

     <button id="pop-btn">退栈</button>

     <button id="font-btn">打印栈顶元素内容</button>

     <button id="empty-btn">判断栈是否为空</button>

     <script>

         var stack = ["apple", "pear"];

         var txt = document.getElementById("stack-input");

         var stackcont = document.getElementById("stack-cont");

         var pushbtn = document.getElementById("push-btn");

         var popbtn = document.getElementById("pop-btn");

         var fontbtn = document.getElementById("font-btn");

         var emptybtn = document.getElementById("empty-btn");

         pushbtn.onclick = function () {

             stack.push(txt.value);

             stackcont.innerHTML = "栈内容：" + stack.join("&lt-");

         }

         popbtn.onclick = function () {

             stack.pop();

             stackcont.innerHTML = "栈内容：" + stack.join("&lt-");

         }

         fontbtn.onclick = function () {

             stackcont.innerHTML = "栈内容：" + stack[0];

         }

         emptybtn.onclick = function () {

             if (stack.length == 0) {

                 stackcont.innerHTML = "栈内容：空";

             } else {

                 stackcont.innerHTML = "栈内容：不为空";

             }

         }

     </script>

 </body>

 </html>

JS里的居民们5-数组(栈)的更多相关文章

  1. JS里的居民们7-对象和数组转换

    编码 学习通用的数据用不同的数据结构进行存储,以及相互的转换 对象转为数组: var scoreObject = { "Tony": { "Math": 95, ...

  2. JS里的居民们6-数组排序

    编码 var arr = [43, 54, 4, -4, 84, 100, 58, 27, 140]; 将上面数组分别按从大到小以及从小到大进行排序后在console中输出 var arr = ['a ...

  3. JS里的居民们4-数组((堆)队列

    编码1(队头在最右) 练习如何使用数组来实现队列,综合考虑使用数组的 push,pop,shift,unshift操作 基于代码,实现如按钮中描述的功能: 实现如阅读材料中,队列的相关入队.出队.获取 ...

  4. 用JS描述的数据结构及算法表示——栈和队列（基础版）

    前言:找了上课时数据结构的教程来看,但是用的语言是c++,所以具体实现在网上搜大神的博客来看,我看到的大神们的博客都写得特别好,不止讲了最基本的思想和算法实现,更多的是侧重于实例运用,一边看一边在心里 ...

  5. Javascript中双等号(==)隐性转换机制 JS里charCodeAt()和fromCharCode()方法拓展应用：加密与解密

    Javascript中双等号(==)隐性转换机制   在Javascript中判断相等关系有双等号(==)和三等号(===)两种.其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否 ...

  6. 理解 Node.js 里的 process.nextTick()

    有很多人对Node.js里process.nextTick()的用法感到不理解,下面我们就来看一下process.nextTick()到底是什么,该如何使用. Node.js是单线程的,除了系统IO之 ...

  7. js里function的apply vs. bind vs. call

    js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...

  8. JS~JS里的数据类型

    JS里的数据类型,它虽然是个弱类型的语言,但它也有自己的规定的,它不会向其它语言那么,使用int来声明一个整形变量,而是使用 var,如果你是一个C#的开发者,你就会知道,原来C#现在也在和JS学,开 ...

  9. Augular JS里的各种ng

    Augular JS里的各种ng- 正文: 1．ng-disabled="一种状态:该状态下不可用"例如: %button.btn.btn-2(ng-disabled=" ...

随机推荐

  1. 51nod2004 终结之时 (支配树+树剖+树链的并)

    link 我永远喜欢洛天依 给定一张图世末积雨云,你需要维护其支配树: 单点修改,子树修改,树链修改 子树求和,树链求和,多条树链的并集求和 撤销之前的操作 可以先用 Lengauer-Tarjan ...

  2. c语言-求完全数的一个算法

    #include<iostream> #include<math.h> using namespace std; int main() { int n,i,j=0,k,a[10 ...

  3. 2016级算法第三次上机-B.Bamboo和巧克力工厂

    B Bamboo和巧克力工厂 分析 三条流水线的问题,依然是动态规划,但是涉及的切换种类比较多.比较易于拓展到n条流水线的方式是三层循环,外层是第k个机器手,里面两层代表可切换的流水线 核心dp语句: ...

  4. jsoup 抓取省市区

    package com.xazhxc.htjcom.back.controller.base; import cn.hutool.core.util.StrUtil; import com.aliba ...

  5. WeakHashMap源码分析

    WeakHashMap是一种弱引用map,内部的key会存储为弱引用, 当jvm gc的时候,如果这些key没有强引用存在的话,会被gc回收掉, 下一次当我们操作map的时候会把对应的Entry整个删 ...

  6. APP元素的四大类

    一个完整的APP包括四大类:各种“栏”.内容视图.控制元素.临时视图 各种“栏”:状态栏.导航栏.标签栏.工具栏.范围栏 内容视图:列表视图.卡片式图.集合视图.图片视图.文本视图 控制元素:用于控制 ...

  7. 进阶篇：4）面向装配的设计DFA总章

    本章目的:理解装配的重要性,明确结构工程师也要对装配进行设计. 1.基础阅读 ①进阶篇:1)DFMA方法的运用: ②需要一台FDM3d打印机:请查看 基础篇:8)结构设计装备必备: 2.为什么要学习D ...

  8. stark - 2 ⇲路由分发

    在介绍前面三个注意点后,开始写stark组件内容. from django.apps import AppConfig from django.utils.module_loading import ...

  9. ZOJ - 2112 主席树套树状数组

    题意:动态第k大,可单点更新,操作+原数组范围6e4 年轻人的第一道纯手工树套树 静态第k大可以很轻易的用权值主席树作差而得 而动态第k大由于修改第i个数会影响[i...n]棵树,因此我们不能在原主席 ...

  10. 【Lua】linux下lua+mod_lwt环境搭建

    Lua 是一个小巧的脚本语言.它具有轻量级.可扩展等优势.它可以作为一个强大.轻量的脚本语言,供任何需要的程序使用. LWT (Lua Web Tools) 可让你使用 Lua 开发 Web 应用,并 ...