devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序之计算器_微信小程序计算器

作者：我家小花儿 | 2024-03-14 06:06:36

赞

踩

微信小程序计算器

参考博客： 

微信小程序--简易计算器_Huang_xianlong的博客-CSDN博客_微信小程序计算器

效果图：

代码：

calculator.wxml

  1. <view class='screen'>{{result}}</view>
  2.  
  3. <view class='test-bg'>
  4.   <view class='btnGroup'>
  5.     <view class='item grey' bindtap='clickButton' id="{{C}}">AC</view>
  6.     <view class='item grey' bindtap='clickButton' id="{{addSub}}">+/-</view>
  7.     <view class='item grey' bindtap='clickButton' id="{{percent}}">%</view>
  8.     <view class='item brown' bindtap='clickButton' id="{{div}}">÷</view>
  9.   </view>
  10.  
  11.   <view class='btnGroup'>
  12.     <view class='item black' bindtap='clickButton' id="{{id7}}">7</view>
  13.     <view class='item black' bindtap='clickButton' id="{{id8}}">8</view>
  14.     <view class='item black' bindtap='clickButton' id="{{id9}}">9</view>
  15.     <view class='item brown' bindtap='clickButton' id="{{mut}}">×</view>
  16.   </view>
  17.  
  18.   <view class='btnGroup'>
  19.     <view class='item black' bindtap='clickButton' id="{{id4}}">4</view>
  20.     <view class='item black' bindtap='clickButton' id="{{id5}}">5</view>
  21.     <view class='item black' bindtap='clickButton' id="{{id6}}">6</view>
  22.     <view class='item brown' bindtap='clickButton' id="{{sub}}">-</view>
  23.   </view>
  24.  
  25.   <view class='btnGroup'>
  26.     <view class='item black' bindtap='clickButton' id="{{id1}}">1</view>
  27.     <view class='item black' bindtap='clickButton' id="{{id2}}">2</view>
  28.     <view class='item black' bindtap='clickButton' id="{{id3}}">3</view>
  29.     <view class='item brown' bindtap='clickButton' id="{{add}}">+</view>
  30.   </view>
  31.  
  32.   <view class='btnGroup'>
  33.     <!-- <view class='item black' bindtap='clickButton' id="{{percent}}">%</view> -->
  34.     <view class='item0 black' bindtap='clickButton' id="{{id0}}">0</view>
  35.     <view class='item black' bindtap='clickButton' id="{{dot}}">.</view>
  36.     <view class='item brown' bindtap='clickButton' id="{{equ}}">=</view>
  37.   </view>
  38.  
  39. </view>

calculator.wxss

  1. page {
  2.   width: 100%;
  3.   height: 100%;
  4.   background-color: #000000;
  5. }
  6.  
  7. .test-bg {
  8.   position: fixed;
  9.   bottom: 0;
  10. }
  11.  
  12. .screen {
  13.   position: fixed;
  14.   color: #fbfbfb;
  15.   font-size: 50px;
  16.   bottom: 850rpx;
  17.   text-align: right;
  18.   width: 730rpx;
  19.   word-wrap: break-word;
  20.  
  21. }
  22.  
  23. .btnGroup {
  24.   display: flex;
  25.   /*弹性显示结构*/
  26.   flex-direction: row;
  27.   /*横向显示*/
  28. }
  29.  
  30. .item {
  31.   width: 150rpx;
  32.   height: 150rpx;
  33.   line-height: 150rpx;
  34.   border-radius: 100%;
  35.   text-align: center;
  36.   margin-right: 40rpx;
  37.   margin-bottom: 10rpx;
  38.   margin-left: 7rpx;
  39.  
  40. }
  41.  
  42. .brown {
  43.   /* 前景色 */
  44.   color: #fefefe;
  45.   font-size: 60rpx;
  46.   /* border: solid 1rpx #ffffff; */
  47.   /* 背景色 */
  48.   background: #efa43e;
  49. }
  50.  
  51. .black {
  52.   /* 前景色 */
  53.   color: #fefefe;
  54.   font-size: 65rpx;
  55.   /* border: solid 1rpx #ffffff; */
  56.   /* 背景色 */
  57.   background: #333333;
  58. }
  59.  
  60. .grey {
  61.   /* 前景色 */
  62.   color: #010101;
  63.   font-size: 50rpx;
  64.   /* border: solid 1rpx #ffffff; */
  65.   /* 背景色 */
  66.   background: #a5a5a5;
  67. }
  68.  
  69. .item0 {
  70.   width: 350rpx;
  71.   line-height: 180rpx;
  72.   border-radius: 175rpx;
  73.   text-align: center;
  74.   margin-right: 40rpx;
  75. }

 calculator.js

  1. Page({
  2.   data: {
  3.     C: 'C',
  4.     addSub: 'addSub',
  5.     add: '+',
  6.     sub: '-',
  7.     mut: '×',
  8.     div: '÷',
  9.     equ: '=',
  10.     percent: '%',
  11.     dot: '.',
  12.     id0: '0',
  13.     id1: '1',
  14.     id2: '2',
  15.     id3: '3',
  16.     id4: '4',
  17.     id5: '5',
  18.     id6: '6',
  19.     id7: '7',
  20.     id8: '8',
  21.     id9: '9',
  22.     result: '0',
  23.     valiBackOfArray: ['+', '-', '×', '÷', '.'],
  24.     completeCalculate: false
  25.   },
  26.   // 计算结果
  27.   calculate: function (str) {
  28.     // 判断是不是有负数
  29.     var isNagativeNum = false;
  30.     if (str.charAt(0) == '-') {
  31.       str = str.replace('-', '').replace('(', '').replace(')', '');
  32.       isNagativeNum = true;
  33.     }
  34.     // 对字符串解析并运算
  35.     var addArray = str.split('+');
  36.     var sum = 0.0;
  37.     for (var i = 0; i < addArray.length; i++) {
  38.       if (addArray[i].indexOf('-') == -1) {
  39.         if (addArray[i].indexOf('×') != -1 || addArray[i].indexOf('÷') != -1 || addArray[i].indexOf('%') != -1)
  40.           sum += this.calculateMutDiv(addArray[i]);
  41.         else sum += Number(addArray[i]);
  42.       } else {
  43.         var subArray = addArray[i].split('-');
  44.         var subSum = 0;
  45.         if (subArray[0].indexOf('×') != -1 || subArray[0].indexOf('÷') != -1 || subArray[0].indexOf('%') != -1) subSum = this.calculateMutDiv(subArray[0]);
  46.         else subSum = Number(subArray[0]);
  47.         for (var j = 1; j < subArray.length; j++) {
  48.           if (subArray[i].indexOf('×') != -1 || subArray[i].indexOf('÷') != -1)
  49.             subSum -= this.calculateMutDiv(subArray[j]);
  50.           else subSum -= Number(subArray[j]);
  51.         }
  52.         sum += subSum;
  53.       }
  54.     }
  55.     if (isNagativeNum) return (-sum).toString();
  56.     else return sum.toString();
  57.   },
  58.   // 分块乘除运算
  59.   calculateMutDiv: function (str) {
  60.     var addArray = str.split('×');
  61.     var sum = 1.0;
  62.     for (var i = 0; i < addArray.length; i++) {
  63.       if (addArray[i].indexOf('÷') == -1 && addArray[i].indexOf('%') == -1) {
  64.         sum *= Number(addArray[i]);
  65.       } else if (addArray[i].indexOf('%') == -1) {
  66.         var subArray = addArray[i].split('÷');
  67.         var subSum = Number(subArray[0]);
  68.         for (var j = 1; j < subArray.length; j++) {
  69.           subSum /= Number(subArray[j]);
  70.         }
  71.         sum *= subSum;
  72.       } else {
  73.         var subArray = addArray[i].split('%');
  74.         var subSum = Number(subArray[0]);
  75.         for (var j = 1; j < subArray.length; j++) {
  76.           subSum %= Number(subArray[j]);
  77.         }
  78.         sum *= subSum;
  79.       }
  80.     }
  81.     return sum;
  82.   },
  83.   // 是否以运算符结尾
  84.   isOperatorEnd: function (str) {
  85.     for (var i = 0; i < this.data.valiBackOfArray.length; i++) {
  86.       if (str.charAt(str.length - 1) == this.data.valiBackOfArray[i]) return true;
  87.     }
  88.     return false;
  89.   },
  90.   clickButton: function (event) {
  91.     if (this.data.result == 0) {
  92.       if (event.target.id == 'back' || event.target.id == 'C' || event.target.id == 'addSub' || event.target.id == '%' || event.target.id == '+' || event.target.id == '-' || event.target.id == '×' || event.target.id == '÷' || event.target.id == '=') return;
  93.       this.setData({
  94.         result: event.target.id
  95.       });
  96.     } else if (event.target.id == 'back') {
  97.       this.setData({
  98.         result: this.data.result.length == 1 ? '0' : this.data.result.substring(0, this.data.result.length - 1)
  99.       });
  100.     } else if (event.target.id == 'C') {
  101.       this.setData({
  102.         result: '0'
  103.       });
  104.     } else if (event.target.id == 'addSub') {
  105.       var r = this.data.result;
  106.       if (this.isOperatorEnd(r)) return;
  107.       if (r.charAt(0) == '-') this.setData({
  108.         result: r.replace('-', '').replace('(', '').replace(')', '')
  109.       });
  110.       else this.setData({
  111.         result: '-(' + r + ')'
  112.       });
  113.     } else if (event.target.id == '%') {
  114.       // if (this.isOperatorEnd(this.data.result)) return;
  115.       this.setData({
  116.         result: this.data.result + event.target.id
  117.       });
  118.     } else if (event.target.id == '=') {
  119.       if (this.isOperatorEnd(this.data.result)) return;
  120.       this.setData({
  121.         result: this.calculate(this.data.result)
  122.       });
  123.       this.setData({
  124.         completeCalculate: true
  125.       });
  126.     } else {
  127.       if (this.isOperatorEnd(this.data.result) && this.isOperatorEnd(event.target.id)) return;
  128.       // 如果计算结果有小数点，直到输入运算符前不能再输入小数点
  129.       if (this.data.completeCalculate && this.data.result.indexOf('.') != -1 && event.target.id == '.') return;
  130.       for (var i = 0; i < this.data.valiBackOfArray.length - 1; i++) {
  131.         if (this.data.valiBackOfArray[i] == event.target.id) {
  132.           this.setData({
  133.             completeCalculate: false
  134.           });
  135.           break;
  136.         }
  137.       }
  138.       this.setData({
  139.         result: this.data.result + event.target.id
  140.       });
  141.     }
  142.   }
  143. })

分享自己做的学习网站：

George's Notes (bifinity.wang)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/232521
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号