iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现简易计算器
  • 289
分享到

微信小程序实现简易计算器

2024-04-02 19:04:59 289人浏览 独家记忆
摘要

微信小程序之简易计算器,供大家参考,具体内容如下 一、介绍 1.中缀表达式 中缀表达式是一种通用的算术或逻辑公式表示方法,操作符以中缀形式处于操作数的中间。中缀表达式是人们常用的算术

微信小程序之简易计算器,供大家参考,具体内容如下

一、介绍

1.中缀表达式

中缀表达式是一种通用的算术或逻辑公式表示方法,操作符以中缀形式处于操作数的中间。中缀表达式是人们常用的算术表示方法。

虽然人的大脑很容易理解与分析中缀表达式,但对计算机来说中缀表达式却是很复杂的,因此计算表达式的值时,通常需要先将中缀表达式转换为前缀或后缀表达式,然后再进行求值。对计算机来说,计算前缀或后缀表达式的值非常简单。

2.后缀表达式

从左至右扫描表达式,遇到数字时,将数字压入堆栈,遇到运算符时,弹出栈顶的两个数,用运算符对它们做相应的计算(次顶元素 op 栈顶元素),并将结果入栈;重复上述过程直到表达式最右端,最后运算得出的值即为表达式的结果。

例:

(1)8+4-62用后缀表达式表示为:
8 4+6 2-
(2)2*(3+5)-4+7/1用后缀表达式表示为:
3 5+2*7 1/4-+

例如后缀表达式“3 4 + 5 × 6 -”:

(1) 从左至右扫描,将3和4压入堆栈;
(2) 遇到+运算符,因此弹出4和3(4为栈顶元素,3为次顶元素,注意与前缀表达式做比较),计算出3+4的值,得7,再将7入栈;
(3) 将5入栈;
(4) 接下来是×运算符,因此弹出5和7,计算出7×5=35,将35入栈;
(5) 将6入栈;
(6) 最后是-运算符,计算出35-6的值,即29,由此得出最终结果。

二、程序代码

1.代码

app.js配置代码如下:


// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, uNIOnId
      }
    })
  },
  globalData: {
    userInfo: null
  },
  
  calculator:{
    express:'', //临时字符串
    strList:[], //中缀表达式存储(队列先进先出)
    strListP:[],  //后缀表达式(队列先进先出)
    list:[], //存放运算符的堆栈 (先进后出)
    calculate:[] //计算表达式堆栈(先进后出)
  }
})

2.逻辑代码

calculator.js代码如下:


// pages/calculator/calculator.js
const app = getApp()
Page({
  
  data: {
    operators: ['AC', 'DEL', '%', '/', '7', '8', '9', '×', '4', '5', '6', '+', '1', '2', '3', '-', '0', '.'],
    res: '=',
    expression: '0',
  },

  clearAll() {
    this.setData({
      expression: '0',
      result: ''
    })
  },

  click: function (event) {
    const val = event.target.dataset.value;

    if (val == 'AC') {
      this.clearAll();
    } else if (val == 'DEL') {
      if (this.data.expression != '0') {
        const res = this.data.expression.substr(0, this.data.expression.length - 1);
        this.setData({
          expression: res
        })
      }
    } else {
      var len = this.data.expression.length;
      var s = this.data.expression.substring(len - 1, len);
      if ((this.checkOperator(s)) && this.checkOperator(val)) {
        const res = this.data.expression.substr(0, this.data.expression.length);
        this.setData({
          expression: res
        })
      } else {
        if ((this.data.expression == '0') && (val == '.')) {
          this.setData({
            expression: this.data.expression + String(val)
          })
        } else {
          this.setData({
            expression: this.data.expression === '0' ? val : this.data.expression + String(val)
          })
        }
      }

    }

  },

  result() {
    app.calculator.strList.length = 0;
    app.calculator.strListP.length = 0;
    app.calculator.list.length = 0;
    app.calculator.calculate.length = 0;

    this.expressToStrList(this.data.expression);

    let tempList = app.calculator.strList;
    this.expressToStrListP(tempList);

    let tempP = app.calculator.strListP
    for (let m in tempP) {
      if (this.checkOperator(tempP[m])) {
        let op1 = app.calculator.calculate[0];
        app.calculator.calculate.shift();
        let op2 = app.calculator.calculate[0];
        app.calculator.calculate.shift();
        app.calculator.calculate.unshift(this.countDetail(op2, tempP[m], op1));
      } else {
        app.calculator.calculate.unshift(tempP[m])
      }
    }
    this.setData({
      result: app.calculator.calculate[0]
    });
  },

  countDetail(num1, operator, num2) {
    let result = 0.0;
    try {
      if (operator == "×") {
        result = parseFloat(num1) * parseFloat(num2);
      } else if (operator == "/") {
        result = parseFloat(num1) / parseFloat(num2);
      } else if (operator == "%") {
        result = parseFloat(num1) % parseFloat(num2);
      } else if (operator == "+") {
        result = parseFloat(num1) + parseFloat(num2);
      } else {
        result = parseFloat(num1) - parseFloat(num2);
      }
    } catch (error) {

    }
    return result;
  },

  expressToStrListP(tempList) {//将中缀表达式集合转变为后缀表达式集合
    for (let item in tempList) {
      if (this.checkOperator(tempList[item])) {
        if (app.calculator.list.length == 0) {
          app.calculator.list.unshift(tempList[item]);
        } else {
          if (this.compaerOperator(app.calculator.list[0], tempList[item])) {
            for (let x in app.calculator.list) {
              app.calculator.strListP.push(app.calculator.list[x]);
            }
            app.calculator.list.length = 0;
            app.calculator.list.unshift(tempList[item]);
          } else {
            app.calculator.list.unshift(tempList[item]);
          }
        }
      } else {
        app.calculator.strListP.push(tempList[item]);
      }
    }
    if (app.calculator.list.length > 0) {
      for (let x in app.calculator.list) {
        app.calculator.strListP.push(app.calculator.list[x]);
      }
      app.calculator.list.length = 0;
    }
  },

  compaerOperator(op1, op2) {
    if ((op1 == "%" || op1 == "×" || op1 == "/") && (op2 == "-" || op2 == "+")) {
      return true;
    } else {
      return false;
    }
  },

  expressToStrList(expression) { //将字符串表达式变成中缀队列
    let temp = '';
    for (let i = 0; i < expression.length; i++) {
      if (i == 0 && expression[i] == "-") {
        temp = temp + expression[i];
      } else {
        if (this.checkDigit(expression[i])) {
          temp = temp + expression[i];
        } else {
          if (temp.length > 0) {
            if (expression[i] == ".") {
              temp = temp + expression[i];
            } else {
              app.calculator.strList.push(parseFloat(temp));
              temp = '';
              app.calculator.strList.push(expression[i]);
            }
          } else {
            temp = temp + expression[i];
          }
        }
      }
    }
    if (temp.length > 0 && this.checkDigit(temp.substring(temp.length - 1))) {
      app.calculator.strList.push(parseFloat(temp));
      temp = '';
    }
  },

  //判断是否是运算符
  checkOperator(input) {
    if (input == "-" || input == "+" || input == "/" || input == "%" || input == "×") {
      return true;
    } else {
      return false;
    }
  },

  //判断是否是数字
  checkDigit(input) {
    if ((/^[0-9]*$/.test(input))) {
      return true;
    } else {
      return false;
    }
  },
})

3.界面代码

calculator.js代码如下:


<!--pages/calculator/calculator.wxml-->
<view class="contaniner">
  <view class="displayer">
     <view class="text">{{expression}}</view>
     <view class="result">={{result}}</view>
    </view>
  <view class="btnArea">
    <block wx:for="{{operators}}">
        <view class="btn" data-value="{{item}}" capture-bind:tap="click">{{item}}</view>
    </block>
    <view class="btn btn1" data-value="{{res}}" bindtap="result">{{res}}</view>
  </view>
</view>

4.样式代码

calculator.js代码如下:



  .container1{
    width: 100%;
    height: 100%;
  }

  .displayer{
    border: 1px solid #f1f3f3;
    width: 100%;
    height: 602![在这里插入图片描述](https://img-blog.csdnimg.cn/20210328162054440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDI4MjE5,size_16,color_FFFFFF,t_70#pic_center)
rpx;
    font-size: 45rpx;
    background-color: rgba(241, 243, 243, 1.0);
  }
.btnArea{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  padding: 3rpx;
  margin: 0;
  background-color: rgb(241, 243, 243);
}
  .btn{
    width: 185rpx;
    display: flex;
    align-items: center;
    height: 120rpx;
    justify-content: center;
    border: 1rpx solid #e8eaeb;
    color: black;
    background-color: #F7F8F9;
  }
  .btn1{
    width: 370rpx;
  }
  .text{
    width: 100%;
    height: 10%;
    text-align: right;
    margin-top: 470rpx;
    background-color: rgba(241, 243, 243, 1.0);
    position: absolute;
    Word-break: break-word;
  }

  .result{
    width: 100%;
    height: 58rpx;
    text-align: right;
    margin-top: 530rpx;
    background-color: rgba(241, 243, 243, 1.0);
    position: absolute;
    word-break: break-word;
  }

三.程序截图

四.总结

使用数组来实现堆栈,然后将表达式转为中缀表达式,再转成后缀表达式,利用堆栈实现计算。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序实现简易计算器

本文链接: https://www.lsjlt.com/news/130750.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现简易计算器
    微信小程序之简易计算器,供大家参考,具体内容如下 一、介绍 1.中缀表达式 中缀表达式是一种通用的算术或逻辑公式表示方法,操作符以中缀形式处于操作数的中间。中缀表达式是人们常用的算术...
    99+
    2024-04-02
  • 微信小程序————简易计算器
    1、计算器小程序     点击页面数字按键可以计算简单的加减乘除数据运算。 2、大概结构 页面显示   大概逻辑是当点第一次击数字键的时候要有个变量来存储这个点击的数,然后再来个记录点击运算符的变量,等要算的数全输入后,最后“...
    99+
    2023-10-26
    微信小程序 小程序
  • 微信小程序实现简易加法计算器
    本文实例为大家分享了微信小程序实现加法计算器的具体代码,供大家参考,具体内容如下 wxml <!--pages/cal/cal.wxml--> <view cla...
    99+
    2024-04-02
  • 微信小程序实现简易计算器功能
    本文实例为大家分享了微信小程序实现简易计算器的具体代码,供大家参考,具体内容如下 实现代码: <!--pages/computer.wxml--> <view c...
    99+
    2024-04-02
  • 微信小程序实现简易的计算器功能
    一个初入IC的硅农,硬件编程经验3个月。偶然接触了微信小程序编程,然后自己写了一个计算器,希望得到改进意见。 功能: 1、计算 + - * /和%; 2、主要是当得出结果的时候,可以...
    99+
    2024-04-02
  • 微信小程序实现简单计算器
    微信小程序写的简单计算器,供大家参考,具体内容如下 jisaunqi.js // pages/jisuanqi/jisuanqi.js Page({ data: {...
    99+
    2024-04-02
  • 微信小程序实现简单计算器功能
    微信小程序:简单计算器,供大家参考,具体内容如下 对于才接触小程序不久的人来说,想要直接上手一个实用性强的项目难度很大,想要快速熟悉小程序的使用,我们可以先尝试着做一个简单的计算器。...
    99+
    2024-04-02
  • 微信小程序实现小型计算器
    本文实例为大家分享了微信小程序实现小型计算器的具体代码,供大家参考,具体内容如下 app.js // app.js App({   onLaunch() {   },   REGEX...
    99+
    2024-04-02
  • 微信小程序实现简单的计算器功能
    本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 wxml <view class='content'> <input va...
    99+
    2024-04-02
  • 微信小程序实现简单计算器与秒表
    本文实例为大家分享了微信小程序实现简单计算器与秒表的具体代码,供大家参考,具体内容如下 实验内容: 任务一:实现一个简单的加减乘除运算。 首先输入两个运算数,然后选择加、减、乘、除四...
    99+
    2024-04-02
  • 微信小程序实现计算器小功能
    微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景,在小程序领域也掺上一脚,本人也是自学小程序的,初期跟很多...
    99+
    2024-04-02
  • 微信小程序实现利息计算器
    本文实例为大家分享了微信小程序实现利息计算器的具体代码,供大家参考,具体内容如下 一、案例说明 设计一个小程序,输入本金、利率,默认本金10000元、利率3%,计算存入银行,复利计息...
    99+
    2024-04-02
  • 微信小程序实现计算器功能
    本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 一、微信小程序开发工具界面 二、目录结构 第一次进到页面它的目录结构如下: 三、需要注意的问题 ...
    99+
    2024-04-02
  • 微信小程序实现计算器案例
    本文实例为大家分享了微信小程序实现计算器的具体代码,供大家参考,具体内容如下 项目展示 页面设计 分为上面输入的显示部分和下面按键部分 <!--pages/index/i...
    99+
    2024-04-02
  • 微信小程序实现简易封装弹窗
    本文实例为大家分享了微信小程序实现简易封装弹窗的具体代码,供大家参考,具体内容如下 1.建立组件文件夹 2.编写组件内容  <!--index.wxml--> <...
    99+
    2024-04-02
  • 微信小程序如何实现简单的计算器功能
    这篇文章主要介绍微信小程序如何实现简单的计算器功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下wxml<view class='content'> &nb...
    99+
    2023-06-20
  • 用微信小程序实现计算器功能
    本文是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下。 页面部分 <view class='box'> <view class='txt...
    99+
    2024-04-02
  • 微信小程序如何实现计算器小功能
    这篇文章主要介绍微信小程序如何实现计算器小功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景...
    99+
    2023-06-20
  • 微信小程序如何实现简易封装弹窗
    今天就跟大家聊聊有关微信小程序如何实现简易封装弹窗,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。建立组件文件夹编写组件内容 <!--index.wxml-->&...
    99+
    2023-06-26
  • 微信小程序实现计时器
    本文实例为大家分享了微信小程序实现计时器的具体代码,供大家参考,具体内容如下 微信小程序点击事件触发计时器 1.wxml <view class="button" bindt...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作