本篇内容介绍了“微信小程序实现计算器功能的代码怎么写”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
具体代码如下：
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
}
}
})“微信小程序实现计算器功能的代码怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.jb51.net/web/33336.html
