微信小程序實現計算器功能的代碼怎么寫

本篇內容介紹了“微信小程序實現計算器功能的代碼怎么寫”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

具體代碼如下：

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>
    <button bindtap="add" data-text="+" class="yellow-color">+</button>
  </view>

  <view class="box">
    <button bindtap="add" data-text="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)
}

JS

//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];

        }
        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
    }
  }
})

“微信小程序實現計算器功能的代碼怎么寫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！