微信小程序 简易计算器

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:"0",
    op:""
  },
  /**
   * 自定义函数-数字 按钮点击事件处理函数
  */
  res: null,
  isClear: false,
  numBtn: function(btn){
    var getNum = btn.target.dataset.val;
    // console.log(num)
    // 如果未清空缓存 或 为初值0
    if (this.isClear || this.data.num === "0"){
      this.setData(
        {
          num: getNum
        }
      )
      this.isClear = false
    } else {
      this.setData(
        {
          // 串接数值
          num: this.data.num + getNum
        }
      )
    }
  },
  /**
   * 自定义函数--功能 按钮点击事件处理函数
  */
  opBtn: function(btn){
    var op = this.data.op
    var num = Number(this.data.num)
    this.setData({
      op:btn.target.dataset.val
    })
    if (this.isClear){
      return 
    }
    this.isClear = true
    if (this.res == null){
      this.res = num
      return
    }
    switch(op){
      case "+":
        this.res += num
        break
      case "-":
        this.res -= num
        break
      case "*":
        this.res *= num
        break
      case "/":
        if (num != 0){
          this.res /= num
        }
        break
      case "%":
        if (num != 0){
          this.res %= num
        }
        break
    }
    // 等号
    this.setData({
      num: this.res + "",
    })
    // this.isClear = true
    // this.res = null
  },
  /**
   * 自定义函数--重置C 按钮点击事件处理函数
  */
  resetBtn: function (btn) {
    this.res = null
    this.isClear = false
    this.setData({
      num: "0",
      op: ""
    })
  },
  /**
   * 自定义函数--删除DEL 按钮点击事件处理函数
  */
  delBtn: function (btn) {
    var num = this.data.num.substr(0,this.data.num.length - 1)
    // 清空情况
    this.setData({
      num: num === "" ? "0" : num  
    })
  },
  /**
   * 自定义函数--数点 按钮点击事件处理函数
  */
  dotBtn: function (btn) {
    // 如果已有小数点
    if (this.data.num.indexOf(".") > 0) return

    if (this.isClear){
      this.setData({
        num: "0."
      })
      this.isClear = false
      return
    } else {
      this.setData({
        num: this.data.num + "."
      })
    }
  }
})

/* pages/index/index.wxss */
/* 页面格式 */
page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 显示框格式 */
.result{
  flex:1;
  background: #f3f6fe;
  position: relative;
}
/* 显示框数字格式与位置 */
.result-num{
  position: absolute;
  bottom: 5vh;
  right: 3vw;
  font-size: 32pt;
}
/* 显示框运算符格式与位置 */
.result-op{
  position: absolute;
  bottom: 1vh;
  left: 3vw;
  font-size: 15pt;
}
/* 按钮点击态背景颜色 */
.bg{
  background: #eee;
}
/* 按钮框格式 */
.btns{
  flex:1;
  display: flex;
  flex-direction: column;
  font-size: 17pt;
  border: 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;
  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;
} */

<!--pages/index/index.wxml-->
<!-- 显示框 -->
<view class='result'>
<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>