微信小程序实现计算器(含历史记录)

本文实例为大家分享了微信小程序实现计算器的具体代码，供大家参考，具体内容如下

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:''
? ? })
? }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现计算器(含历史记录)的详细内容...