微信小程序实现简单的计算器功能_生活百科

微信小程序实现简单的计算器功能,博智网带你了解详细信息。
本文实例为大家分享了小程序实现计算器功能的具体代码，供大家参考，具体内容如下
wxml
<view class='content'><input value='https://www.yf-zs.com/redian/{{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}}})
【微信小程序实现简单的计算器功能】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持趣讯吧。