1. Toy模板网首页
  2. > Toy博客

微信小程序计算器（含源码）、含js精确运算代码

10月前 作者：l煎饼果子 分类：Toy博客 阅读(61) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序计算器（含源码）、含js精确运算代码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

一、引言与效果图

 二、源码

0.目录结构：

1.xxxx.wxml文件

 2.样式文件

（1）xxxx.less文件

（2）xxxx.wxss文件 （不会使用 less 的可以用这个）

3.xxxx.json文件

4.accurate.js

5.xxxx.js文件

三、结语

一、引言与效果图

       最近在做一个记账本小程序，其中需要用到计算器，但是在网上找的代码，用起来不是不符合我的想法，就是看着非常难受，于是还是自己写了一个

微信小程序计算器（含源码）、含js精确运算代码

 二、源码

0.目录结构：

名字 ( test ) 是我随便取的，你们可以取别的，但是accurate.js的名字请勿改动

微信小程序计算器（含源码）、含js精确运算代码

1.xxxx.wxml文件

对应上方目录结构的 ： test.wxml

<view class="counter">
  <view class="result">
    <view class="showResult">
      <view class="result-num">{{counter.posture[0]}}</view>
      <view class="result-num">{{counter.posture[1]}}</view>
      <view class="result-num">{{counter.posture[2]}}</view>
    </view>
  </view>
  <view class="btns">
    <view class="row">
      <view class="col clear" hover-class="hover-bg" bindtap="resetBtn">C</view>
      <view class="col" hover-class="hover-bg" bindtap="delBtn">DEL</view>
      <view class="col chu" hover-class="hover-bg" bindtap="opBtn" data-val="%">%</view>
      <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="÷">÷</view>
    </view>
    <view class="row">
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="7">7</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="8">8</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="9">9</view>
      <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="×">×</view>
    </view>
    <view class="row">
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="4">4</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="5">5</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="6">6</view>
      <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="-">-</view>
    </view>
    <view class="row">
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="1">1</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="2">2</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="3">3</view>
      <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="+">+</view>
    </view>
    <view class="row">
      <view class="col zero" hover-class="hover-bg" bindtap="numBtn" data-val="0">0</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val=".">.</view>
      <view class="col save" hover-class="hover-bg" bindtap="finish">=</view>
    </view>
  </view>
</view>

 2.样式文件

我是用less写的，所以这里先放less文件（不知道less怎么使用的，可以往下滑，看到wxss文件）

对应上方目录结构的 ： test.wxss 和 test.less

（1）xxxx.less文件

page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.counter {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 60rpx;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;

  .result {
    flex: 1;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    border-bottom: 5rpx solid #d5dde1;
    background: rgba(215, 250, 252, 0.253);

    .showResult {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      flex-wrap: wrap;
      font-size: 100rpx;
      width: 100%;
      box-sizing: border-box;
      padding: 20rpx;
        .result-num {
          overflow-x: auto;
          text-align: end;
          word-wrap: break-word;
        }
    }
  }

  .btns {
    flex: 1;

    .row {
      display: flex;

      .col {
        flex-basis: 25%;
        height: 150rpx;
        border-right: 1rpx solid #ccc;
        border-bottom: 1rpx solid #ccc;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50rpx;

        &.clear {
          color: #f00;
        }

        &.zero {
          flex-basis: 50%;
        }

        &:last-child,
        &.chu {
          color: #008bfc;
        }

        &.save {
          color: #f90808;
          font-size: 80rpx;
          font-weight: 900;
        }

        &.hover-bg {
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
  }
}

（2）xxxx.wxss文件 （不会使用 less 的可以用这个）

page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.counter {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 60rpx;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}

.counter .result {
  flex: 1;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  border-bottom: 5rpx solid #d5dde1;
  background: rgba(215, 250, 252, 0.253);
}

.counter .result .showResult {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  font-size: 100rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
}

.counter .result .showResult .result-num {
  overflow-x: auto;
  text-align: end;
  word-wrap: break-word;
}

.counter .btns {
  flex: 1;
}

.counter .btns .row {
  display: flex;
}

.counter .btns .row .col {
  transition: all 0.3s;
  flex-basis: 25%;
  height: 150rpx;
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50rpx;
}

.counter .btns .row .col.clear {
  color: #f00;
}

.counter .btns .row .col.zero {
  flex-basis: 50%;
}

.counter .btns .row .col:last-child,
.counter .btns .row .col.chu {
  color: #008bfc;
}

.counter .btns .row .col.save {
  color: #f90808;
  font-size: 80rpx;
  font-weight: 900;
}

.counter .btns .row .col.hover-bg {
  background: rgba(255, 255, 255, 0.2);
}

3.xxxx.json文件

对应上方目录结构的 ： test.json

{
  "usingComponents": {},
  "navigationBarTitleText": "计算器",
  "navigationBarBackgroundColor": "#f4dfe9"
}

4.accurate.js

对应上方目录结构的 ： accurate.js ，请勿改名

这个文件是用于进行精确计算的：因为js自带的浮点数计算有bug！用这个函数进行加减乘除，可以防止浮点数运算出现问题

module.exports = {
  //加法 add
  add(arg1, arg2) {
    let r1, r2, m;
    try {
      r1 = arg1.toString().split(".")[1].length;
    } catch (e) {
      r1 = 0;
    }
    try {
      r2 = arg2.toString().split(".")[1].length;
    } catch (e) {
      r2 = 0;
    }
    m = Math.pow(10, Math.max(r1, r2));
    return (arg1 * m + arg2 * m) / m;
  },
  //减法 subtraction
  sub(arg1, arg2) {
    let r1, r2, m, n;
    try {
      r1 = arg1.toString().split(".")[1].length;//获取小数点后的长度
    } catch (e) {
      r1 = 0;
    }
    try {
      r2 = arg2.toString().split(".")[1].length;//获取小数点后的长度
    } catch (e) {
      r2 = 0;
    }
    m = Math.pow(10, Math.max(r1, r2));
    n = (r1 >= r2) ? r1 : r2;
    return ((arg1 * m - arg2 * m) / m).toFixed(n);
  },
  //乘法 multiplication
  mul(arg1, arg2) {
    let m = 0,
      s1 = arg1.toString(),
      s2 = arg2.toString();
    try {
      m += s1.split(".")[1].length;
    } catch (e) {}
    try {
      m += s2.split(".")[1].length;
    } catch (e) {}
    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
  },
  //除法 division
  div(arg1, arg2) {
    let t1 = 0,
      t2 = 0,
      r1, r2;
    try {
      t1 = arg1.toString().split(".")[1].length;
    } catch (e) {}
    try {
      t2 = arg2.toString().split(".")[1].length;
    } catch (e) {}

    r1 = Number(arg1.toString().replace(".", ""));
    r2 = Number(arg2.toString().replace(".", ""));
    return (r1 / r2) * Math.pow(10, t2 - t1);
  }
}

5.xxxx.js文件

对应上方目录结构的 test.js

我的做法是，使用一个长度为3的数组，存储式子的 “左” “中” “右” 的数字或操作符，然后再进行一些特殊情况的处理

//引入精确计算的js
const acc = require('./accurate.js');

Page({
  data: {
    counter: {
      posture: ['', '', ''], //存放式子，比如   1    +   12 
      ansType: false, //判断是否是手动点击的等于号
    },
  },
  //输入数字
  numBtn(e) {
    let num = e.currentTarget.dataset.val
    let posture = this.data.counter.posture
    if (posture[1] === '') { //如果运算符为空，就在式子数组第0个位置放入内容
      //判断特殊情况1： 小数点
      if (num == '.' && posture[0] == '') { //如果是点，且字符串为空，就默认加上 0
        posture[0] = '0'
      } else if (num == '.' && posture[0].indexOf('.') > -1) { //如果已经有点了还按
        console.log('已经有点，不能再按');
        return
      }
      //判断特殊情况2：如果是手动点了等号之后，再按数字，不应该在原位置加，而是清空再加 （通过其它方式比如 “1+2+“ 调用的finish函数不算，需要是手动点击的，判断方法：手动点击的等号有事件对象e）
      if (this.data.counter.ansType) {
        posture[0] = ''
        this.setData({
          'counter.ansType': false //生效一次即可取消
        })
      }
      //判断特殊情况3：如果这里面只有0，那么就删掉这个0，再增加（想输入小数点除外）
      if (num !== '.' &&posture[0] == '0') {
        posture[0] = ''
      }
      this.setData({
        'counter.posture[0]': posture[0] + num
      })
    } else { //如果运算符不为空，就在式子数组第2个位置放入内容
      //判断特殊情况： 小数点
      if (num == '.' && posture[2] == '') { //如果是点，且字符串为空，就默认加上 0
        posture[2] = '0'
      } else if (num == '.' && posture[2].indexOf('.') > -1) { //如果已经有点了还按
        console.log('已经有点，不能再按');
        return
      }
      //判断特殊情况2：如果这里面只有0，那么就删掉这个0，再增加 （想输入小数点除外）
      if (num !== '.' && posture[2] == '0') {
        posture[2] = ''
      }
      this.setData({
        'counter.posture[2]': posture[2] + num
      })
    }
    console.log(this.data.counter.posture);
  },
  //输入运算符
  opBtn(e) {
    let op = e.currentTarget.dataset.val
    let posture = this.data.counter.posture
    if (posture[2] == '') { //如果式子最后一位为空的话，就把符号放进去运算符位置
      this.setData({
        'counter.posture[1]': op
      })
    } else { //否则就先运算，再放进去
      this.finish()
      this.setData({
        'counter.posture[1]': op
      })
    }
    console.log(this.data.counter.posture);
  },
  //运算
  finish(e) {
    let posture = this.data.counter.posture
    let left = parseFloat(posture[0] || 0) //左数字 如果是空字符串就设置为0
    let right = parseFloat(posture[2] || 0) //右数字 如果是空字符串就设置为0
    let ans = 0 //答案
    console.log(left, right);
    switch (posture[1]) { //根据不同运算符，进行不同的运算
      case '+':
        ans = acc.add(left, right)
        break;
      case '-':
        ans = acc.sub(left, right)
        break;
      case '×':
        ans = acc.mul(left, right)
        break;
      case '÷':
        if (right == 0) { //如果数字不合规
          wx.showToast({
            title: '不能除 0 哦',
            icon: 'none'
          })
          ans = left
        } else {
          let _ans = acc.div(left, right)
          let x = String(_ans).indexOf('.') + 1;
          let y = String(_ans).length - x;
          if (y > 10) {
            ans = _ans.toFixed(10);
          } else {
            ans = _ans
          }
        }
        break;
      case '%':
        if (right == 0) { //如果数字不合规
          wx.showToast({
            title: '不能余 0 哦',
            icon: 'none'
          })
          ans = left
        } else {
          ans = left % right
        }
        break;
      default:
        ans = left
        break;
    }
    console.log(ans);

    posture = ['' + ans, '', ''] //清空数组，把答案放在第一位

    let ansType = false
    if (e) { //如果有事件对象，说明是手动点击的”=“，应该加一个标识符，点了=再点数字的时候，应该把左边数字清空再处理数字
      console.log('手动点击的等于号，后面点击数字时，将清空左边数字');
      ansType = true
    }
    this.setData({
      'counter.posture': posture,
      'counter.ansType': ansType
    })
  },
  //清空
  resetBtn() {
    this.setData({
      'counter.posture': ['', '', ''],
    })
  },
  //退位
  delBtn() {
    let posture = this.data.counter.posture
    //从右到左的顺序删除
    if (posture[2]) { //如果最后一位不为空，就先删它
      posture[2] = posture[2].substr(0, posture[2].length - 1)
    } else if (posture[1]) { //如果符号位不为空，就删它
      posture[1] = ''
    } else if (posture[0]) { //如果第一位不为空，就删它
      posture[0] = posture[0].substr(0, posture[0].length - 1)
    } else return //否则就不做事
    this.setData({
      'counter.posture': posture
    })
    console.log(this.data.counter.posture);
  },


})

三、结语

这次的小程序源码分享到此结束，如果遇到了源码中出现了什么bug，欢迎在评论区指出

如果你有更好的实现方式，希望大家不吝赐教

经过评论区提醒，已对除法结果小数点后长度进行限制，同时修改了部分样式表，使得数字超长时会自动换行文章来源地址https://www.toymoban.com/news/detail-429832.html

到了这里，关于微信小程序计算器（含源码）、含js精确运算代码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序案例——计算器

    微信小程序案例——计算器

    1、创建项目 按照惯例，做一些初始化工作 2、设置导航栏 在 app.json 文件设置 window 配置项 pages/index/index.wxml 文件 1、编写页面整体结构 2、编写结果区域结构 两行内容：第一行是当前的计算式，第二行是当前计算结果 3、编写按钮区域第一行按钮的结构 第一行包含四个按钮：

    2024年04月11日
    浏览(41)
  • 【微信小程序】计算器案例

    【微信小程序】计算器案例

    🏆今日学习目标：第二十一期——计算器案例 ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：30分钟 🎉专栏系列：我的第一个微信小程序 嗨嗨嗨，好久没更新小程序专栏了，本期浅浅用小程序写一个计算器。 最终代码会上传至资源噢~ 新建一个项目，在app.json中配置文件导

    2024年01月17日
    浏览(56)
  • 微信小程序3-2 计算器

    微信小程序3-2 计算器

    1、创建项目 创建项目微信小程序项目 - 计算器 单击【确定】按钮 按照惯例做一些初始化工作 2、设置导航栏 在 app.json 文件设置 window 配置项 pages/index/index.wxml 文件 1、编写页面的整体结构 2、编写结果区域的结构 两行内容：第一行是当前的计算式，第二行是当前计算结果

    2024年04月26日
    浏览(42)
  • 微信小程序如何制作简易计算器

    微信小程序如何制作简易计算器

    1、首先在浏览器中输入\\\"GitHub - dunizb/wxapp-sCalc: :speech_balloon:微信小程序版简易计算器demo，适合入门练手\\\"网址,输入完成后会进入到以下这个界面: 2、点击旁边绿色的按键 3、点击之后会有以下几个选项： 点击最后一行的Download ZIP，下载一个文件 然后解压一下这个文件，解压完

    2024年04月23日
    浏览(64)
  • 微信小程序如何写一个计算器

    微信小程序如何写一个计算器

    构思：1.画一个计算界面            2.找一个计算器实现库            3.调用实现库进行计算 实现：1.画出计算器图标、界面  页面代码实现 样式代码 实现代码 库代码  

    2024年02月11日
    浏览(57)
  • 微信小程序案例3-2：计算器

    微信小程序案例3-2：计算器

    录屏演示多次计算 1、创建项目 创建微信小程序项目 - 计算器 单击【确定】按钮 按照惯例，做一些初始化工作 2、设置导航栏 在 app.json 设置 window 配置项 pages/index/index.wxml 文件 1、编写页面整体结构 2、编写结果区域结构 两行内容：第一行是当前的计算式，第二行是当前计算

    2024年04月12日
    浏览(100)
  • 房贷计算器微信小程序原生语言

    房贷计算器微信小程序原生语言

    效果： 输入 300万 结果 还款明细 一共有3个页面 1、输入页面 2、结果页面 3、详情页面 index.wxml文件

    2024年04月28日
    浏览(64)
  • 微信小程序入门项目-做一个马马虎虎的计算器

    微信小程序入门项目-做一个马马虎虎的计算器

    效果： 打开微信开发者工具，新建小程序 打开app.json设置顶部的标题和颜色 由于小程序不支持JavaScript的一些函数，比如evel()，所以代码变得复杂很多。 pagesindexindex.js的代码：

    2024年02月08日
    浏览(48)
  • uniapp写一个计算器用于记账（微信小程序，APP）

    uniapp写一个计算器用于记账（微信小程序，APP）

    提要：自己用uniapp写了一个记账小程序（目前是小程序），写到计算器部分，在网上找了别人写的计算器，大多数逻辑都是最简单的，都不能满足一个记账计算器的基本逻辑。与其在网上找来找去，还不如自己多捣鼓捣鼓。 https://gitee.com/yapplee/kog-calculator.git 贴部分主要代码，

    2024年02月05日
    浏览(48)
  • 用javascript做一个计算器,用js做一个计算器代码

    用javascript做一个计算器,用js做一个计算器代码

    大家好，给大家分享一下怎么用javascript做一个简单的计算器，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！ 页面布局设计（HTML+CSS)   由于在之前的博客中有对html和css进行详细的讲解，再次就不多叙述，直接上代码。因为js中用到了JQuery选择器所以在

    2024年02月04日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包