编码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>

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. 关于前后台DOM树应用

    Dom对象是在程序开发中很实用而且经常会应用到的技术,通过Dom对象可以传递具有树结构的对象,有利用前台页面的诸如树的显示和相应值的处理,本文从两个方面全面解析Dom对象的应用,一是从后台得到完整的D ...

  2. 范围for、new内存动态分配、nullptr

    一.范围for语句:用于遍历一个序列 ,,,,}; for(auto &x : v) // 省了拷贝的动作,提高了系统效率 { cout << x << endl; } ...

  3. unicode 转换成中文

    unicode 转换成中文 + (NSString *)replaceUnicode:(NSString *)unicodeStr { NSString *tempStr1 = [unicodeStr ...

  4. XMPP Authentication

      From: http://www.ietf.org/rfc/rfc2831.txt 2 Authentication The following sections describe how to ...

  5. js 的常用方法和对象

    每日分享: 加油!你一定可以!你是最牛逼的!!!-------------------------------------------------------------------------- - ...

  6. JavaWeb学习笔记（二十一）—— 监听器Listener

    一.监听器概述 JavaWeb中的监听器是Servlet规范中定义的一种特殊类,它用于监听web应用程序中的ServletContext, HttpSession和 ServletRequest等域对 ...

  7. Django的模板与母版

    Django的模板与母版 Python Django 模板 母版  Django模板系统 与Django模板有关的官方文档 语法相关 变量相关 {{ 变量名 }}  {{ name }},{{name ...

  8. golang (2) package

    综述 golang package是基本的管理单元,package是golang最基本的分发单位和工程管理中依赖关系的体现. 每个golang源代码文件开头都拥有一个package声明,表示该gola ...

  9. 怎么搭建vue-cli脚手架

    我们在使用vue搭建项目的时候,经常要使用到vue-cli. 一.安装node.js 去node官网下载并安装node,一直next就行. 等待安装完毕,输入node-v,如果输出版本号,那说明已经成 ...

  10. 20190430-Bootstrap之旅

    写在前面的乱七八糟的前言:当当当,现在是早上9:06,emmm是我是我还是我,(*╹▽╹*)今天讲讲BT这个磨人的小妖精,为什么说磨人呢,因为用的好就不磨人了啊~咳咳就跟我女盆友一样┓( ´∀` )┏ ...