微信小程序实现计算器功能的代码怎么写

本篇内容介绍了“微信小程序实现计算器功能的代码怎么写”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

具体代码如下：

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

“微信小程序实现计算器功能的代码怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！