经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序实现计算器案例
来源：jb51　　时间：2021/7/19 15:33:07　　对本文有异议

本文实例为大家分享了微信小程序实现计算器的具体代码，供大家参考，具体内容如下

项目展示

页面设计

分为上面输入的显示部分和下面按键部分

  1. <!--pages/index/index.wxml-->
  2. <view class="result">
  3.   <view class="result-num">{{num}}</view>
  4.   <view class="result-op">{{op}}</view>
  5. </view>
  6. <view class="btns">
  7.   <view>
  8.     <view hover-class="bg" bindtap="resetBtn">C</view>
  9.     <view hover-class="bg" bindtap="delBtn">DEL</view>
  10.     <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
  11.     <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
  12.   </view>
  13.   <view>
  14.     <view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
  15.     <view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
  16.     <view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
  17.     <view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
  18.   </view>
  19.   <view>
  20.     <view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
  21.     <view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
  22.     <view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
  23.     <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
  24.   </view>
  25.   <view>
  26.     <view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
  27.     <view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
  28.     <view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
  29.     <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
  30.   </view>
  31.   <view>
  32.     <view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
  33.     <view hover-class="bg" bindtap="dotBtn">.</view>
  34.     <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
  35.   </view>
  36. </view>

页面样式

  1. /* pages/index/index.wxss */
  2.  
  3. page {
  4.   display: flex;
  5.   flex-direction: column;
  6.   height: 100%;
  7.   color: #555;
  8. }
  9.  
  10. .result {
  11.   flex: 1;
  12.   background: #f3f6fe;
  13.   position: relative;
  14. }
  15.  
  16. .result-num {
  17.   position: absolute;
  18.   font-size: 27pt;
  19.   bottom: 5vh;
  20.   right: 3vw;
  21. }
  22.  
  23. .result-op {
  24.   font-size: 15pt;
  25.   position: absolute;
  26.   bottom: 1vh;
  27.   right: 3vw;
  28. }
  29.  
  30. .btns {
  31.   flex: 1;
  32. }
  33.  
  34. /* 按钮样式 */
  35.  
  36. .bg {
  37.   background: rgb(223, 44, 20);
  38. }
  39.  
  40. .btns {
  41.   flex: 1;
  42.   display: flex;
  43.   flex-direction: column;
  44.   font-size: 17pt;
  45.   border-top: 1rpx solid #ccc;
  46.   border-left: 1rpx solid #ccc;
  47. }
  48.  
  49. .btns > view {
  50.   flex: 1;
  51.   display: flex;
  52. }
  53.  
  54. .btns > view > view {
  55.   flex-basis: 25%;
  56.   border-right: 1rpx solid #ccc;
  57.   border-bottom: 1rpx solid #ccc;
  58.   box-sizing: border-box;
  59.   display: flex;
  60.   align-items: center;
  61.   justify-content: center;
  62. }
  63.  
  64. .btns > view:last-child > view:first-child {
  65.   flex-basis: 50%;
  66. }
  67.  
  68. .btns > view:first-child > view:first-child {
  69.   color: #f00;
  70. }
  71.  
  72. .btns > view > view:last-child {
  73.   color: #fc8e00;
  74. }

页面逻辑

util–>calc.js

计算过程是将小数都乘以两数10的最大次幂化为整数，这样可进行高精度计算，最后再将得数除以相应的10的次幂

例如

  1. // 精确计算
  2. module.exports = {
  3.   // 加
  4.   add: function(arg1, arg2) {
  5.     var r1, r2, m
  6.     try {
  7.       r1 = arg1.toString().split(".")[1].length
  8.     } catch (e) {
  9.       r1 = 0
  10.     }
  11.     try {
  12.       r2 = arg2.toString().split(".")[1].length
  13.     } catch (e) {
  14.       r2 = 0
  15.     }
  16.     // 将小数都化为整数在进行计算  m是需要×的10的幂数
  17.     m = Math.pow(10, Math.max(r1, r2))
  18.     // 最后返回的时候再除以m
  19.     return (arg1 * m + arg2 * m) / m
  20.   },
  21.   // 减
  22.   sub: function(arg1, arg2) {
  23.     var r1, r2, m, n
  24.     try {
  25.       r1 = arg1.toString().split(".")[1].length
  26.     } catch (e) {
  27.       r1 = 0
  28.     }
  29.     try {
  30.       r2 = arg2.toString().split(".")[1].length
  31.     } catch (e) {
  32.       r2 = 0
  33.     }
  34.     m = Math.pow(10, Math.max(r1, r2))
  35.     //动态控制精度长度
  36.     n = (r1 >= r2) ? r1 : r2
  37.     return ((arg1 * m - arg2 * m) / m).toFixed(n)
  38.   },
  39.   // 乘
  40.   mul: function(arg1, arg2) {
  41.     var m = 0,
  42.       s1 = arg1.toString(),
  43.       s2 = arg2.toString()
  44.     try {
  45.       m += s1.split(".")[1].length
  46.     } catch (e) {}
  47.     try {
  48.       m += s2.split(".")[1].length
  49.     } catch (e) {}
  50.     return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
  51.   },
  52.   // 除
  53.   div: function(arg1, arg2) {
  54.     var t1 = 0,
  55.       t2 = 0,
  56.       r1, r2
  57.     try {
  58.       t1 = arg1.toString().split(".")[1].length
  59.     } catch (e) {}
  60.     try {
  61.       t2 = arg2.toString().split(".")[1].length
  62.     } catch (e) {}
  63.  
  64.     r1 = Number(arg1.toString().replace(".", ""))
  65.     r2 = Number(arg2.toString().replace(".", ""))
  66.     return (r1 / r2) * Math.pow(10, t2 - t1)
  67.   }
  68. }

index.js

数字点击处理事件

当点击数字不为零，并且指示不清空时候，将输入的num拼接到page里的num

  1.  // 数字按钮事件处理函数
  2.   numBtn: function(e) {
  3.     var num = e.target.dataset.val
  4.     if (this.data.num === '0' || this.isClear) {
  5.       this.setData({
  6.         num: num
  7.       })
  8.       this.isClear = false
  9.     } else {
  10.       this.setData({
  11.         num: this.data.num + num
  12.       })
  13.     }
  14.   },

运算符处理事件

  1.  // 运算符事件处理函数
  2.   opBtn: function(e) {
  3.     var op = this.data.op
  4.     // 获取之前的数
  5.     var num = Number(this.data.num)
  6.     this.setData({
  7.       op: e.target.dataset.val
  8.     })
  9.     if (this.isClear) {
  10.       return
  11.     }
  12.     this.isClear = true
  13.     if (this.result === null) {
  14.       this.result = num
  15.       return
  16.     }
  17.     if (op === '+') {
  18.       this.result = calc.add(this.result, num)
  19.     } else if (op === '-') {
  20.       ......
  21.       其他运算操作（详细代码看下面完整代码部分）
  22.       ......
  23.     }
  24.     this.setData({
  25.       num: this.result + ''
  26.     })
  27.   },

全部js

  1. // pages/index/index.js
  2. const calc = require('../../utils/calc.js')
  3.  
  4. Page({
  5.  
  6.   /**
  7.    * 页面的初始数据
  8.    */
  9.   data: {
  10.     num: '0',
  11.     op: ''
  12.   },
  13.   // 结果
  14.   result: null,
  15.   // 是否清空数字行
  16.   /*
  17.   清空的情况(值为true)
  18.     点击过运算符之后,改为true 以便下一次输入数字显示
  19.     点击清空
  20.   */
  21.   isClear: false,
  22.  
  23.   // 数字按钮事件处理函数
  24.   numBtn: function(e) {
  25.     var num = e.target.dataset.val
  26.     if (this.data.num === '0' || this.isClear) {
  27.       this.setData({
  28.         num: num
  29.       })
  30.       this.isClear = false
  31.     } else {
  32.       this.setData({
  33.         num: this.data.num + num
  34.       })
  35.     }
  36.   },
  37.  
  38.   // 运算符事件处理函数
  39.   opBtn: function(e) {
  40.     var op = this.data.op
  41.     // 获取之前的数
  42.     var num = Number(this.data.num)
  43.     this.setData({
  44.       op: e.target.dataset.val
  45.     })
  46.     if (this.isClear) {
  47.       return
  48.     }
  49.     this.isClear = true
  50.     if (this.result === null) {
  51.       this.result = num
  52.       return
  53.     }
  54.     if (op === '+') {
  55.       this.result = calc.add(this.result, num)
  56.     } else if (op === '-') {
  57.       this.result = calc.sub(this.result, num)
  58.     } else if (op === '*') {
  59.       this.result = calc.mul(this.result, num)
  60.     } else if (op === '/') {
  61.       this.result = calc.div(this.result, num)
  62.     } else if (op === '%') {
  63.       this.result = this.result % num
  64.     }
  65.     this.setData({
  66.       num: this.result + ''
  67.     })
  68.   },
  69.  
  70.   // 小数点事件处理函数
  71.   dotBtn: function() {
  72.     if (this.isClear) {
  73.       this.setData({
  74.         num: '0.'
  75.       })
  76.       this.isClear = false
  77.       return
  78.     }
  79.     if (this.data.num.indexOf('.') >= 0) {
  80.       return
  81.     }
  82.     this.setData({
  83.       num: this.data.num + '.'
  84.     })
  85.   },
  86.  
  87.   // DEL按钮处理函数
  88.   delBtn: function() {
  89.     var num = this.data.num.substr(0, this.data.num.length - 1)
  90.     this.setData({
  91.       num: num === '' ? '0' : num
  92.     })
  93.   },
  94.  
  95.   // C按钮事件处理函数
  96.   resetBtn: function() {
  97.     this.result = null
  98.     this.isClear = false
  99.     this.setData({
  100.       num: '0',
  101.       op: ''
  102.     })
  103.   }
  104. })

案例下载：微信小程序实现计算器案例

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号