微信小程序---简易计算器

wxml：

<view>

  <view class="input">{{number}}</view>

  <view class="a">

    <button style="background-color: rgb(247, 149, 22);" class="button" bindtap="clear">C</button>

    <button style="background-color: rgb(247, 149, 22);" class="button" bind:tap="delete">←</button>

    <button style="background-color: rgb(247, 149, 22);" class="button">◷</button>

    <button style="background-color: rgb(247, 149, 22);" class="button" bind:tap="jia">＋</button>

  </view>

  <view class="a">

    <button style="background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="9" bind:tap="onInput">9</button>

    <button style="background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="8" bind:tap="onInput">8</button>

    <button style="background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="7" bind:tap="onInput">7</button>

    <button style="background-color: rgb(247, 149, 22);" class="button" bind:tap="jian">-</button>

  </view>

  <view class="a">

    <button style="background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="6" bind:tap="onInput">6</button>

    <button style="background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="5" bind:tap="onInput">5</button>

    <button style="background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="4" bind:tap="onInput">4</button>

    <button style="background-color: rgb(247, 149, 22);" class="button" bind:tap="cheng">×</button>

  </view>

  <view class="a">

    <button style="background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="3" bind:tap="onInput">3</button>

    <button style="background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="2" bind:tap="onInput">2</button>

    <button style="background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="1" bind:tap="onInput">1</button>

    <button style="background-color: rgb(247, 149, 22);" class="button" bind:tap="chu">÷</button>

  </view>

  <view class="a">

    <button style="width:226px; background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="0" bind:tap="onInput">0</button>

    <button style="background-color: rgba(35, 147, 240, 0.966);" class="button" data-number="." bind:tap="onInput">.</button>

    <button style="background-color: rgb(247, 149, 22);" class="button" bind:tap="dengyu">=</button>

  </view>

</view>

wxss：

.input{

  height: 200px;

  background-color: rgb(200, 206, 206);

  font-size: 70px;

  font-weight:bold;

  display: flex;

  align-items: center;

  justify-content:flex-end;

}

.a{

  display: flex;

}

.button{

  width: 110px;

  height: 100px;

  display:flex;

  justify-content: center;

  align-items: center;

  font-size: 20px;

  border: 1px solid white;

  color: #fff;

}

js：

// pages/calculator/calculator.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    number: '',

  },

  onInput: function(e) {

    var number = e.currentTarget.dataset.number;

    if (this.data.waitingForOperand) {

      this.setData({

        number: number,

        waitingForOperand: false

      });

    } else {

      this.setData({

        number: this.data.number + number

      });

    }

  },

  delete: function() {

    let number = this.data.number;

    if (number.length > 0) {

      number = number.slice(0, number.length - 1);

      this.setData({

        number: number

      });

    }

  },

  clear: function() {

    this.setData({

      number: ''

    });

  },

  jia: function() {

    this.setOperator('+');

  },

  jian: function() {

    this.setOperator('-');

  },

  cheng: function() {

    this.setOperator('*');

  },

  chu: function() {

    this.setOperator('/');

  },

  dengyu: function() {

    let currentNumber = this.data.number;

    let lastOperand = this.data.lastOperand;

    let operator = this.data.operator;

    if (lastOperand === '' && operator === null) {

      this.calculate('=');

      return;

    }

    try {

      let result = this.evaluate(lastOperand, currentNumber, operator);

      this.setData({

        result: result,

        number: result.toString(),

        waitingForOperand: true,

        operator: null,

        lastOperand: ''

      });

    } catch (e) {

      this.setData({

        number: 'Error'

      });

    }

  },

  setOperator: function(operator) {

    if (this.data.number !== '') {

      let currentNumber = this.data.number;

      let lastOperand = this.data.lastOperand;

      this.setData({

        lastOperand: currentNumber,

        operator: operator,

        number: '',

        waitingForOperand: true

      });

    }

  },

  evaluate: function(lastOperand, currentNumber, operator) {

    lastOperand = parseFloat(lastOperand);

    currentNumber = parseFloat(currentNumber);

    switch (operator) {

      case '+':

        return lastOperand + currentNumber;

      case '-':

        return lastOperand - currentNumber;

      case '*':

        return lastOperand * currentNumber;

      case '/':

        if (currentNumber === 0) {

          throw new Error('Division by zero');

        }

        return lastOperand / currentNumber;

      default:

        return currentNumber;

    }

  },

})