微信小程序计算器

微信小程序计算器

index.wxml

<view class='screen'>{{result}}</view>
 
<view class='test-bg'>
  <view class='btnGroup'>
    <view class='item grey' bindtap='clickButton' id="{{C}}">AC</view>
    <view class='item grey' bindtap='clickButton' id="{{addSub}}">+/-</view>
    <view class='item grey' bindtap='clickButton' id="{{percent}}">%</view>
    <view class='item brown' bindtap='clickButton' id="{{div}}">÷</view>
  </view>
 
  <view class='btnGroup'>
    <view class='item black' bindtap='clickButton' id="{{id7}}">7</view>
    <view class='item black' bindtap='clickButton' id="{{id8}}">8</view>
    <view class='item black' bindtap='clickButton' id="{{id9}}">9</view>
    <view class='item brown' bindtap='clickButton' id="{{mut}}">×</view>
  </view>
 
  <view class='btnGroup'>
    <view class='item black' bindtap='clickButton' id="{{id4}}">4</view>
    <view class='item black' bindtap='clickButton' id="{{id5}}">5</view>
    <view class='item black' bindtap='clickButton' id="{{id6}}">6</view>
    <view class='item brown' bindtap='clickButton' id="{{sub}}">-</view>
  </view>
 
  <view class='btnGroup'>
    <view class='item black' bindtap='clickButton' id="{{id1}}">1</view>
    <view class='item black' bindtap='clickButton' id="{{id2}}">2</view>
    <view class='item black' bindtap='clickButton' id="{{id3}}">3</view>
    <view class='item brown' bindtap='clickButton' id="{{add}}">+</view>
  </view>
 
  <view class='btnGroup'>
    <view class='item0 black' bindtap='clickButton' id="{{id0}}">0</view>
    <view class='item black' bindtap='clickButton' id="{{dot}}">.</view>
    <view class='item brown' bindtap='clickButton' id="{{equ}}">=</view>
  </view>
 
</view>

index.wxss

page {
    width: 100%;
    height: 100%;
    background-color: black;
  }
   
  .test-bg {
    position: fixed;
    bottom: 0;
  }
   
  .screen {
    position: fixed;
    color: #fbfbfb;
    font-size: 50px;
    bottom: 850rpx;
    text-align: right;
    width: 730rpx;
    word-wrap: break-word;
   
  }
   
  .btnGroup {
    display: flex;
    /*弹性显示结构*/
    flex-direction: row;
    /*横向显示*/
  }
   
  .item {
    width: 150rpx;
    height: 150rpx;
    line-height: 150rpx;
    border-radius: 100%;
    text-align: center;
    margin-right: 40rpx;
    margin-bottom: 8rpx;
    margin-left: 8rpx;
   
  }
   
  .brown {
    /* 前景色 */
    color: #000000;
    font-size: 50rpx;
    /* border: solid 1rpx #ffffff; */
    /* 背景色 */
    background-color: #a5a5a5;
  }
   
  .black {
    /* 前景色 */
    color: #fefefe;
    font-size: 65rpx;
    /* border: solid 1rpx #ffffff; */
    /* 背景色 */
    background: #333333;
  }
   
  .grey {
    /* 前景色 */
    color: #fbfbfb;
    font-size: 50rpx;
    /* 背景色 */
    background: #a5a5a5;
  }
   
  .item0 {
    width: 350rpx;
    line-height: 180rpx;
    border-radius: 175rpx;
    text-align: center;
    margin-right: 40rpx;
  }

index.js文件

Page({
    data: {
      C: 'C',
      addSub: 'addSub',
      add: '+',
      sub: '-',
      mut: '×',
      div: '÷',
      equ: '=',
      percent: '%',
      dot: '.',
      id0: '0',
      id1: '1',
      id2: '2',
      id3: '3',
      id4: '4',
      id5: '5',
      id6: '6',
      id7: '7',
      id8: '8',
      id9: '9',
      result: '0',
      valiBackOfArray: ['+', '-', '×', '÷', '.'],
      completeCalculate: false
    },
   // 计算结果
    calculate: function (str) {
      // 判断负数
      var isNagativeNum = false;
      if (str.charAt(0) == '-') {
        str = str.replace('-', '').replace('(', '').replace(')', '');
        isNagativeNum = true;
      }
      // 字符串解析
      var addArray = str.split('+');
      var sum = 0.0;
      for (var i = 0; i < addArray.length; i++) {
        if (addArray[i].indexOf('-') == -1) {
          if (addArray[i].indexOf('×') != -1 || addArray[i].indexOf('÷') != -1 || addArray[i].indexOf('%') != -1)
            sum += this.calculateMutDiv(addArray[i]);
          else sum += Number(addArray[i]);
        } else {
          var subArray = addArray[i].split('-');
          var subSum = 0;
          if (subArray[0].indexOf('×') != -1 || subArray[0].indexOf('÷') != -1 || subArray[0].indexOf('%') != -1) subSum = this.calculateMutDiv(subArray[0]);
          else subSum = Number(subArray[0]);
          for (var j = 1; j < subArray.length; j++) {
            if (subArray[i].indexOf('×') != -1 || subArray[i].indexOf('÷') != -1)
              subSum -= this.calculateMutDiv(subArray[j]);
            else subSum -= Number(subArray[j]);
          }
          sum += subSum;
        }
      }
      if (isNagativeNum) return (-sum).toString();
      else return sum.toString();
    },
    // 分块乘除运算
    calculateMutDiv: function (str) {
      var addArray = str.split('×');
      var sum = 1.0;
      for (var i = 0; i < addArray.length; i++) {
        if (addArray[i].indexOf('÷') == -1 && addArray[i].indexOf('%') == -1) {
          sum *= Number(addArray[i]);
        } else if (addArray[i].indexOf('%') == -1) {
          var subArray = addArray[i].split('÷');
          var subSum = Number(subArray[0]);
          for (var j = 1; j < subArray.length; j++) {
            subSum /= Number(subArray[j]);
          }
          sum *= subSum;
        } else {
          var subArray = addArray[i].split('%');
          var subSum = Number(subArray[0]);
          for (var j = 1; j < subArray.length; j++) {
            subSum %= Number(subArray[j]);
          }
          sum *= subSum;
        }
      }
      return sum;
    },
    // 运算符结尾
    isOperatorEnd: function (str) {
      for (var i = 0; i < this.data.valiBackOfArray.length; i++) {
        if (str.charAt(str.length - 1) == this.data.valiBackOfArray[i]) return true;
      }
      return false;
    },
    clickButton: function (event) {
      if (this.data.result == 0) {
        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;
        this.setData({
          result: event.target.id
        });
      } else if (event.target.id == 'back') {
        this.setData({
          result: this.data.result.length == 1 ? '0' : this.data.result.substring(0, this.data.result.length - 1)
        });
      } else if (event.target.id == 'C') {
        this.setData({
          result: '0'
        });
      } else if (event.target.id == 'addSub') {
        var r = this.data.result;
        if (this.isOperatorEnd(r)) return;
        if (r.charAt(0) == '-') this.setData({
          result: r.replace('-', '').replace('(', '').replace(')', '')
        });
        else this.setData({
          result: '-(' + r + ')'
        });
      } else if (event.target.id == '%') {
        this.setData({
          result: this.data.result + event.target.id
        });
      } else if (event.target.id == '=') {
        if (this.isOperatorEnd(this.data.result)) return;
        this.setData({
          result: this.calculate(this.data.result)
        });
        this.setData({
          completeCalculate: true
        });
      } else {
        if (this.isOperatorEnd(this.data.result) && this.isOperatorEnd(event.target.id)) return;
        // 结果有小数点，到输入运算符前不能再输入小数点
        if (this.data.completeCalculate && this.data.result.indexOf('.') != -1 && event.target.id == '.') return;
        for (var i = 0; i < this.data.valiBackOfArray.length - 1; i++) {
          if (this.data.valiBackOfArray[i] == event.target.id) {
            this.setData({
              completeCalculate: false
            });
            break;
          }
        }
        this.setData({
          result: this.data.result + event.target.id
        });
      }
    }
  })

以上就是微信小程序计算器的源代码，如有导入问题，一定是没联网