分享个小程序计算器

微信小程序计算器

WXML

<view id="panel" style="font-size: {{fontSize}}rem">{{currentNumber}}</view>

<view id="buttons">
    <view class="button tool" catchtap="tapHandler" data-button="AC">AC</view>
    <view class="button tool" catchtap="tapHandler" data-button="+/-">+/-</view>
    <view class="button tool" catchtap="tapHandler" data-button="%">%</view>
    <view class="button operator" catchtap="tapHandler" data-button="÷">÷</view>
    <view class="button number" catchtap="tapHandler" data-button="7">7</view>
    <view class="button number" catchtap="tapHandler" data-button="8">8</view>
    <view class="button number" catchtap="tapHandler" data-button="9">9</view>
    <view class="button operator" catchtap="tapHandler" data-button="×">×</view>
    <view class="button number" catchtap="tapHandler" data-button="4">4</view>
    <view class="button number" catchtap="tapHandler" data-button="5">5</view>
    <view class="button number" catchtap="tapHandler" data-button="6">6</view>
    <view class="button operator" catchtap="tapHandler" data-button="-">-</view>
    <view class="button number" catchtap="tapHandler" data-button="1">1</view>
    <view class="button number" catchtap="tapHandler" data-button="2">2</view>
    <view class="button number" catchtap="tapHandler" data-button="3">3</view>
    <view class="button operator" catchtap="tapHandler" data-button="+">+</view>
    <view class="button number zero" catchtap="tapHandler" data-button="0">0</view>
    <view class="button number" catchtap="tapHandler" data-button=".">.</view>
    <view class="button operator" catchtap="tapHandler" data-button="=">=</view>
</view>

WXSS

page {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: STHeitiSC-Light,STHeiti;
}

#panel {
    display: flex;
    background: #202020;
    align-items: flex-end;
    color: #FFF;
    flex-direction: row-reverse;
    flex-grow: 1;
}

#buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 937.5rpx;
    flex-grow: 0;
    justify-content: space-between;
}

.button {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
    font-size: 1.5rem;
}

.tool {
    color: #000;
    background: #C5C6C9;
}

.number {
    color: #000;
    background: #D1D2D5;
}

.operator {
    color: #FFF;
    background: #F98A11;
}

.zero {
    width: 50%;
}

JS

const initNumber = '0'
const initFontSize = 4.7
Page({
  currentNumber: initNumber,
  baseNumber: null,
  byNumber: null,
  operator: null,
  prevOperator: null,
  data: {
    fontSize: initFontSize,
    currentNumber: initNumber,
  },
  tapHandler(event) {
    if (!event.target.dataset.button) return
    switch (event.target.dataset.button) {
      case 'AC':
        return this.clearButtonHandler()
      case '+/-':
        return this.symbolButtonHandler()
      case '%':
        return this.percentButtonHandler()
      case '+':
      case '-':
      case '×':
      case '÷':
        return this.operationHandler(event.target.dataset.button)
      case '0':
      case '1':
      case '2':
      case '3':
      case '4':
      case '5':
      case '6':
      case '7':
      case '8':
      case '9':
        return this.numberButtonHandler(parseInt(event.target.dataset.button))
      case '.':
        return this.decimalPointButtonHandler()
      case '=':
        return this.operate()
    }
  },

  clearButtonHandler() {
    this.currentNumber = initNumber
    this.baseNumber = null
    this.byNumber = null
    this.operator = null
    this.prevOperator = null
    this.showNumber(this.currentNumber)
  },
  symbolButtonHandler() {
    if (/^-/.test(this.currentNumber)) {
      this.currentNumber = this.currentNumber.replace(/^\-/, '')
    } else {
      this.currentNumber = '-' + this.currentNumber
    }
    this.showNumber(this.currentNumber)
  },
  percentButtonHandler() {
    let number = Number(this.data.currentNumber)
    number = number / 100
    this.currentNumber = number.toString()
    this.showNumber(this.currentNumber)
  },
  operationHandler(operator) {

    if (!this.prevOperator) {

      if (!this.baseNumber) {
        this.baseNumber = Number(this.currentNumber)
        this.currentNumber = '0'
      }
      this.prevOperator = this.operator = operator
      return
    }


    this.operate()
    this.prevOperator = this.operator = operator
  },
  numberButtonHandler(number) {
    if (this.currentNumber === '0') {
      this.currentNumber = ''
    } else if (this.currentNumber === '-0') {
      this.currentNumber = '-'
    }
    this.currentNumber += number.toString()
    this.showNumber(this.currentNumber)
  },
  decimalPointButtonHandler() {
    if (this.currentNumber.indexOf('.') > 0) { return }
    this.currentNumber += '.'
    this.showNumber(this.currentNumber)
  },

  operate() {
    if (!this.operator) return
    const currentNumber = Number(this.currentNumber)

    if (!this.byNumber) {
      this.byNumber = currentNumber || this.baseNumber
    } else if (currentNumber && !this.prevOperator) {
      this.baseNumber = currentNumber
    } else if (currentNumber && this.prevOperator) {
      this.byNumber = currentNumber
    }

    switch (this.operator) {
      case '+':
        this.baseNumber += this.byNumber
        break
      case '-':
        this.baseNumber -= this.byNumber
        break
      case '×':
        this.baseNumber *= this.byNumber
        break
      case '÷':
        this.baseNumber /= this.byNumber
        break
    }

    this.currentNumber = '0'
    this.prevOperator = null
    this.showNumber(this.baseNumber.toString())
  },

  showNumber(number) {

    let fontSize

    if (number.length <= 7) {
      fontSize = initFontSize
    } else if (number.length <= 9) {
      fontSize = 3.7
    } else if (number.length <= 12) {
      fontSize = 2.7
    } else {
      fontSize = 1.5
    }

    this.setData({
      fontSize,
      currentNumber: number
    })
  },
  onShareAppMessage: function () {
    return {
      title: '计算器',
      path: '/pages/cal/cal',
      success: function (res) {
      },
      fail: function (res) {
      }
    }
  },

})

ps：这版也是很久之前网上找的，如侵权，请联系。纯分享！

最后欢迎大家点击我的小程序，不止有计算器功能哦~