微信小程序如何实现简单的计算器功能

这篇文章主要介绍微信小程序如何实现简单的计算器功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

具体内容如下

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

以上是“微信小程序如何实现简单的计算器功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！