微信小程式隨堂筆記3

簡易版計算器

能實現基本的加、減、乘、除、求餘----2020.9.15

index.wxml程式碼

<!--pages/index/index.wxml-->
<view class="result">
  <view class="result-num">{{num}}</view>
  <view class="result-op">{{op}}</view>
</view>
<viwe 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="doBtn">.</view>
    <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
  </view>
</viwe>

index.wxss程式碼

/* pages/index/index.wxss */
page{
  display: flex;
  height: 100%;
  flex-direction: column;
  color: #555;
}
.result{
  flex: 1;
  background: #f3f6fe;
  position: relative;
}
.bg{
  background: #eee;
}
.btns{
  flex:1;
  display: flex;
  flex-direction: column;
  font-size: 17pt;
  border-top: 1rpx solid #ccc;
  border-left:  solid #ccc;
}
/* btns裡的第一級view */
/* 彈性佈局 */
.btns>view{
flex: 1;
display: flex;
}
/* btns裡的第二級view */
.btns>view>view{
  flex-basis: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
  box-sizing: border-box;
}
.btns>view:last-child>view:first-child{
  flex-basis: 50%;
}
.btns>view:first-child>view:first-child{
  color:red;
}
.btns>view>view:last-child{
  color: orange;
}

在utils資料夾下的calcilb.js

// 精確計算
module.exports = {
  add: function(arg1, arg2) {
    var r1, r2, m
    try {
      r1 = arg1.toString().split(".")[1].length
    } catch (e) {
      r1 = 0
    }
    try {
      r2 = arg2.toString().split(".")[1].length
    } catch (e) {
      r2 = 0
    }
    m = Math.pow(10, Math.max(r1, r2))
    return (arg1 * m + arg2 * m) / m
  },
  sub: function(arg1, arg2) {
    var r1, r2, m, n
    try {
      r1 = arg1.toString().split(".")[1].length
    } catch (e) {
      r1 = 0
    }
    try {
      r2 = arg2.toString().split(".")[1].length
    } catch (e) {
      r2 = 0
    }
    m = Math.pow(10, Math.max(r1, r2))
    //動態控制精度長度
    n = (r1 >= r2) ? r1 : r2
    return ((arg1 * m - arg2 * m) / m).toFixed(n)
  },
  mul: function(arg1, arg2) {
    var m = 0,
      s1 = arg1.toString(),
      s2 = arg2.toString()
    try {
      m += s1.split(".")[1].length
    } catch (e) {}
    try {
      m += s2.split(".")[1].length
    } catch (e) {}
    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
  },
  div: function(arg1, arg2) {
    var t1 = 0,
      t2 = 0,
      r1, r2
    try {
      t1 = arg1.toString().split(".")[1].length
    } catch (e) {}
    try {
      t2 = arg2.toString().split(".")[1].length
    } catch (e) {}

    r1 = Number(arg1.toString().replace(".", ""))
    r2 = Number(arg2.toString().replace(".", ""))
    return (r1 / r2) * Math.pow(10, t2 - t1)
  }
}

index.js程式碼

// pages/index/index.js

//呼叫calcilb.js
const calclib = require("../utils/calclib.js")

Page({
  data: {
    num:'0',
    op:''
  },

  result:null,
  isClear:false,

  // 數位按鈕的處理方法
  numBtn:function(e){
    var d = e.target.dataset.val
    // 如果num為0時，直接把按鈕的值賦值給num;否則加行追加到num的後邊
    if(this.data.num==='0'  || this.isClear){
      this.setData({
        num:d
      })
      this.isClear = false
    }else{
      this.setData({
        num:this.data.num+d
      })
    }    
  },

  // 把最近輸入的數刪除
  delBtn:function(){
    var d= this.data.num.substr(0,this.data.num.length-1)
    // 重新賦值給自己
    this.setData({
      num: d===''?'0':d
    })
  },

  resetBtn:function(){
    this.result=null
    this.isClear = false
    this.setData({
      num:'0',
      op:''
    })
  },

  // 小數點的操作
  doBtn: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+'.'
    })
  },

  //運運算元
  opBtn:function(e){
    // 暫存運運算元
    var op = this.data.op
    // 暫存第一個運算元
    var num1= Number(this.data.num)

    // 取當前使用者點選的運運算元
    this.setData({
      op:e.target.dataset.val
    })
    console.log("第一個運算數:"+this.data.num)
    console.log("運運算元:"+this.data.op)

    // 第二個運算數的處理
    this.isClear = true
    if(this.result===null){
      this.result=num1
      return
    }
    console.log("第一個運算數:"+this.result)
    console.log("第二個運算數:"+num1)
    //運算
    if(op==='+'){
      this.result = calclib.add(this.result,num1)
    }
    else if(op==='-'){
      this.result = calclib.sub(this.result,num1)
    }
    else if(op==='*'){
      this.result = calclib.mul(this.result,num1)
    }
    else if(op==='/'){
      this.result = calclib.div(this.result,num1)
    }
    else if(op==='%'){
      this.result = this.result%num1
    }

    this.setData({
      num:this.result+''
    })
  }
})

介面效果：