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

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

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

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