微信小程序实现简单的计算器功能
作者：聪明可爱小轩轩
这篇文章主要为大家详细介绍了微信小程序实现简单的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现计算器功能的具体代码，供大家参考，具体内容如下
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
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。