本篇内容介绍了“微信小程序实现计算器功能的代码怎么写”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
具体代码如下：
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 } }})“微信小程序实现计算器功能的代码怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
