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

计算器功能"/>

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

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

如果感觉这篇文章对你有帮助，加个关注吧！！！

也可关注我的公众号，我们一起交流。