本文例項為大家分享了微信小程式實現計算器功能的具體程式碼，供大家參考，具體內容如下

wxml

<view class='content'>
  <input value='{{calculation}}'></input>
  <view class='box'>
    <button class='yellow-color'>退格</button>
    <button class='yellow-color' bindtap='empty'>清屏</button>
    <button class='yellow-color'>❤</button>
    http://www.cppcns.com
 
<button bindtap='add' data-text='+' class='yellow-color'>+</button>
  </view>

  <view class='box'>
    <button bindtap='add' data-twww.cppcns.comext='9'>9</button>
    <button bindtap='add' data-text='8'>8</button>
    <button bindtap='add' data-text='7'>7</button>
    <button bindtap='add' class='yellow-color' data-text='-'>-</button>
  </view>

  <view class='box'>
    <button bindtap='add' data-text='6'>6</button>
    <button bindtap='add' data-text='5'>5</button>
    <button bindtap='add' data-text='4'>4</button>
    <button bindtap='add' class='yellow-color' data-text='*'>*</button>
  </view>

  <view class='box'>
    <button bindtap='add' data-text='3'>3</button>
    <button bindtap='add' data-text='2'>2</button>
    <button bindtap='add' data-text='1'>1</button>
    <button bindtap='add' data-text='/' class='yellow-color'></button>
  </view>

  <view class='box'>
    <button bindtap='add' data-text='0'>0</button>
    <button bindtap=
 
'add' data-text='.'>.</button>
    <button>歷史</button>
    <button class='yellow-color' bindtap='res'>=</button>
  </view>


</view>

wxss

input {
  width: 95%;
  height: 250rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #ccc;
}

.box {
  display: flex;
}
button {
  width: 20%;
  height: 150rpx;
  margin-bottom: 20rpx;
  line-height: 150rpx;
  background-color:rgb(0,150,250);
  color: white;
}

.yellow-color {
  background-color: rgb(247,142,24)
}

//index.js
//獲取應用例項
const app = getApp()

Page({
  data: {
    calculation:"",result:0,character:[],// 運算子號
    operand: [],// 數字
    temp:false
  },// 輸入框輸入資料
  add:function(e) {
    let input = e.currentTarget.dataset.text;
    var that = this;
    if (input == '+' || input == '-' || input == '*' || input == '/') {
      this.data.temp = false; // 用於記錄上一次是否是操作符
      var item = 'character[' + this.data.character.length+ ']';
      this.setData({
        [item] :input
      }) 
    } else {
      var item = 'operand['+this.data.operand.length+']';
     
      if(that.data.temp) {
        // 拿到前一個的值
        var res = 'operand[' + (this.data.operand.length-1) + ']'
        
        var ress= that.data.operand.length-1;
        var xyz = that.data.operand[ress] * 10 + parseInt(input);
        that.setData({
          [res]:xyz
        })
      } else {
        input = parseInt(input);
        that.data.temp = true;
        that.setData({
          [item]: input
        })
      }
    }
    // 將所有的內容放到顯示框中
    this.setData({
      calculation:this.data.calculation+input
    })

  },// 計算答案
  res:function() {
    console.log(this.data.character.length);
    console.log(this.data.operand.length)
    var character_len =  this.data.character.length ;
    var operand_len = this.data.operand.length;
    console.log(operand_len - character_len)
    if(operand_len - character_len == 1) {
      this.data.result = this.data.operand[0];
      console.log("初始值"+this.data.result);
      for(var i=0;i<character_len;i++) {
        if(this.data.character[i] == '+') {
          this.data.result = this.data.result + this.data.operand[i + 1];

        }
        if (this.data.character[i] == '-') {
          this.data.result = this.data.result - this.data.operand[i + 1];

        }
        if (this.data.character[i] == '*') {
          this.data.result = this.data.result * this.data.operand[i + 1];

   qPICWQ     }
        if (this.data.character[i] == '/') {
          this.data.result = this.data.result / this.data.operand[i + 1];

        }
        
      }
    } else {
      this.setData({
        result:'輸入有誤，清空資料，重新輸入'
      })
    }

    this.setData({
     calculation:this.data.result
    })
  },// 清空螢幕
  empty:function() {
    this.setData({
      calculation: "",result: 0,character: [],// 運算子號
      operand: [],// 數字
      temp: false
    }
  }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。