微信小程序实现计算器(含历史记录)
作者：灵魂学者
这篇文章主要为大家详细介绍了微信小程序实现计算器，含历史记录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现计算器的具体代码，供大家参考，具体内容如下
1、实现效果图
2、代码编写
index.wxml
<!--author:LHXZ 灵魂学者-->
<!--pages/index/index.wxml-->
<view class="result">
<view class="historyed">|历史记录</view>
<scroll-view scroll-y bindscrolltolower class="historying">
<view wx:for="{{logs}}" wx:key="item" class="h_text">{{item}}</view>
</scroll-view>
<view class="clear" bindtap="clear">清空记录|</view>
<view class="history">{{history}}</view>
<view class="result-num">{{num}}</view>
<view class="result-op">{{op}}</view>
</view>
<view class="btns">
<view>
<view hover-class="bg" bindtap="resetBtn">C</view>
<view hover-class="bg" bindtap="delBtn">DEL</view>
<view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
<view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
<view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
<view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
<view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
<view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
<view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
<view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
<view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
<view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
<view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
<view hover-class="bg" bindtap="dotBtn">.</view>
<view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
</view>
</view>index.wxss
/* pages/index/index.wxss author:LHXZ 灵魂学者*/
page {
display: flex;
flex-direction: column;
height: 100%;
color: #555;
}
.result {
flex: 1;
background: #f3f6fe;
position: relative;
}
.result-num {
position: absolute;
font-size: 27pt;
bottom: 5vh;
right: 3vw;
}
.result-op {
font-size: 15pt;
position: absolute;
bottom: 1vh;
right: 3vw;
}
.btns {
flex: 1;
}
/* 按钮样式 */
.bg {
background: #eee;
}
.btns {
flex: 1;
display: flex;
flex-direction: column;
font-size: 17pt;
border-top: 1rpx solid #ccc;
border-left: 1rpx solid #ccc;
}
.btns > view {
flex: 1;
display: flex;
}
.btns > view > view {
flex-basis: 25%;
border-right: 1rpx solid #ccc;
border-bottom: 1rpx solid #ccc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.btns > view:last-child > view:first-child {
flex-basis: 50%;
}
.btns > view:first-child > view:first-child {
color: #f00;
}
.btns > view > view:last-child {
color: #fc8e00;
}
.history{
position: absolute;
top:20rpx;
right:40rpx;
font-size: 2rem;
color: rgb(199, 199, 199);
}
.h_text{
color: rgb(136, 136, 136);
margin-left: 20rpx;
}
.historying{
position: absolute;
top:200rpx;
}
scroll-view{
height: 200rpx;
background-color: rgba(255, 255, 255, 0.5);
}
.historyed{
position: absolute;
top:150rpx;
left: 10rpx;
font-size: 30rpx;
color: gray;
}
.clear{
position: absolute;
top:150rpx;
right: 10rpx;
font-size: 30rpx;
color: blue;
}index.json
{
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "计算器",
"navigationBarTextStyle": "black",
"usingComponents": {
}
}index.js
/*author:LHXZ 灵魂学者*/
Page({
/**
* 页面的初始数据
*/
data: {
num: '0',
op: '',
history:'',
logs:[]
},
result: null,
isClear: false,
// 数字按钮事件处理函数
numBtn: function(e) {
var num = e.target.dataset.val
if (this.data.num === '0' || this.isClear) {
this.setData({
num:num
})
this.isClear = false
} else{
this.setData({
num: this.data.num + num
})
}
},
// 运算符事件处理函数
opBtn: function(e) {
var op = this.data.op;
var num = Number(this.data.num);
var newOp = e.target.dataset.val
this.setData({
op:newOp
})
if (this.isClear) {
this.setData({
history:this.data.history.substr(0,this.data.history.length-1)+newOp
})
return
}
this.setData({history:this.data.history+''+num+newOp})
this.isClear = true
if (this.result === null) {
this.result = num
return
}
if (op === '+') {
this.result = this.result + num
} else if (op === '-') {
this.result = this.result - num
} else if (op === '*') {
this.result = this.result * num
} else if (op === '/') {
this.result = this.result / num
} else if (op === '%') {
this.result = this.result % num
}else if (op === '=') {
this.result =num
this.setData({
history:num + newOp
})
}
this.setData({
num: this.result + '',
})
// 历史记录
this.data.logs.unshift(this.data.history);
this.setData({
logs:this.data.logs
})
},
// 清空记录
clear:function(){
this.setData({
logs:[]
})
},
// 小数点事件处理函数
dotBtn: function() {
if (this.isClear) {
this.setData({
num: '0.'
})
this.isClear = false
return
}
if (this.data.num.indexOf('.') >= 0) {
return
}
this.setData({
num: this.data.num + '.'
})
},
// DEL按钮处理函数
delBtn: function() {
var num = this.data.num.substr(0, this.data.num.length - 1)
this.setData({
num: num === '' ? '0' : num
})
},
// C按钮事件处理函数
resetBtn: function() {
this.result = null
this.isClear = false
this.setData({
num: '0',
op: '',
history:''
})
}
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。