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

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

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

具体代码如下：

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

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

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[