请实现一个计算器的功能 - 前端知识每日3+1

NicholasBaiYa 2019-12-12 00:45:08

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算器</title>
    <style>
        .box {
            width: 400px;
            display: flex;
            margin: 0 auto;
            flex-flow: column nowrap;
            align-items: center;
        }

        .row {
            display: flex;
            flex-flow: row wrap;
        }

        .column {
            display: flex;
            flex-flow: column nowrap;
        }

        .row-1 {
            justify-content: flex-end;
        }

        .row-2>div {
            width: 300px;
        }

        .row-3>div {
            width: 300px;
        }

        .show {
            width: 400px;
            height: 100px;
            border: 1px solid;
            margin-bottom: 10px;
            margin-top: 10px;
            text-align: right;
        }

        .show-1 {
            font-size: 30px;
            line-height: 35px;
        }

        .show-2 {
            font-size: 40px;
            line-height: 45px;
        }

        button {
            width: 100px;
            height: 100px;
            font-size: 30px;
        }

        .width-2 {
            width: 200px;
        }

        .height-2 {
            height: 200px;
        }
    </style>
</head>

<body>
    <div class='box'>
        <div class="show">
            <div class="show-1">0</div>
            <div class="show-2">0</div>
        </div>
        <div class="num-button">
            <div class="row row-1">
                <button>/</button>
                <button>*</button>
                <button>-</button>
            </div>
            <div class="row row-2">
                <div class="row">
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                </div>
                <button class="height-2">+</button>
            </div>
            <div class="row row-3">
                <div class="row">
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button class="width-2">0</button>
                    <button>.</button>
                </div>
                <button class="height-2">Enter</button>
            </div>
        </div>
    </div>
    <script>
        let elementHeight = function (e) {
            return `height: ${e.offsetHeight}, width: ${e.offsetWidth}`
        }
        let show1 = document.getElementsByClassName('show-1')[0]
        let show2 = document.getElementsByClassName('show-2')[0]
        let oc = 1
        let button = document.getElementsByClassName('box')[0].addEventListener('click', function (e) {
            if (!oc) {
                show1.innerHTML = 0
                oc = 1
            }
            if (e.target.innerText == 'Enter') {
                show2.innerHTML = eval(show1.innerHTML)
                oc = 0
            } else {
                if (show1.innerHTML == 0 && isNaN(e.target.innerText)) return
                show1.innerHTML = show1.innerHTML == 0 ? e.target.innerText : (show1.innerHTML + e.target.innerText)
            }
        })
    </script>
</body>

</html>

0 1 0

SXX19950910 2019-12-12 10:33:44

那我就来个vue版本的吧，无限接近原生苹果计算器APP哦。

<template>
  <div id="test-wrap">
    <div class="calculator">
      <div class="result-area">
        <span class="show-number">
          {{ number }}
        </span>
      </div>
      <div class="btn-area">
        <div class="computed-box">
          <div v-for="(item, index) in computedList" :key="index" class="computed-btn" @click="handleClickComputed(item.type)">
            {{ item.text }}
          </div>
        </div>
        <div class="number-box">
          <div v-for="(item, index) in numberList" :key="index" class="number-btn" @click="handleClickNumber(item.text)">{{ item.text }}</div>
          <div class="number-btn" @click="handleClear">AC</div>
          <div class="result-btn" @click="handleComputedResult">＝</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: '0',
      calculation: '',
      calculationNumber: 0,
      computedRule: '',
      hasCalculation: false,
      awaitNumber: '',
      lastCalculation: '',
      computedList: [
        {
          text: '+',
          type: '+'
        },
        {
          text: '-',
          type: '-'
        },
        {
          text: '×',
          type: '*'
        },
        {
          text: '÷',
          type: '/'
        }
      ],
      numberList: [
        {
          text: '0'
        },
        {
          text: '1'
        },
        {
          text: '2'
        },
        {
          text: '3'
        },
        {
          text: '4'
        },
        {
          text: '5'
        },
        {
          text: '6'
        },
        {
          text: '7'
        },
        {
          text: '8'
        },
        {
          text: '9'
        }
      ]
    }
  },
  watch: {
    'computedRule'(newVal) {
      console.log(newVal)
    }
  },
  methods: {
    handleClickNumber(number) {
      if (this.number === '0') {
        this.number = number
      } else {
        if (this.hasCalculation) {
          this.number = number
          this.hasCalculation = false
        } else {
          this.number = `${this.number}` + number
        }
      }
      this.computedRule = `${this.computedRule}${number}`
    },
    handleClickComputed(type) {
      this.hasCalculation = true
      if (!this.lastCalculation) {
        this.lastCalculation = type
      } else {
        this.getComputedResult()
      }
      this.computedRule = `${this.computedRule}${type}`
    },
    getComputedResult() {
      try {
        // eslint-disable-next-line no-eval
        this.number = eval(this.computedRule)
      } catch (e) {
        this.computedRule = this.computedRule.substr(0, this.computedRule.length - 1)
        console.warn(e)
      }
    },
    handleComputedResult() {
      this.getComputedResult()
    },
    handleClear() {
      this.computedRule = ''
      this.number = '0'
      this.hasCalculation = false
    }
  }
}
</script>

<style lang="scss">
  #test-wrap {
    .calculator {
      width: 312px;
      padding: 20px;
      border-radius: 16px;
      background-color: #000;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .result-area {
        height: 100px;
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        position: relative;
        .show-number {
          word-break: break-all;
          position: absolute;
          text-align: right;
          bottom: 0;
          right: 10px;
          width: 100%;
          color: white;
          font-size: 40px;
        }
      }
      .btn-area {
        .computed-box {
          display: flex;
          align-items: center;
          .computed-btn {
            width: 48px;
            height: 48px;
            border-radius: 100%;
            background-color: orange;
            text-align: center;
            color: white;
            line-height: 48px;
            font-size: 36px;
            margin: 0 10px;
            cursor: pointer;
            transition: .2s linear background-color;
            &:active {
              background-color: #FFD689;
            }
          }
        }
        .number-box {
          display: flex;
          flex-wrap: wrap;
          .number-btn {
            width: 48px;
            height: 48px;
            border-radius: 100%;
            background-color: #333333;
            text-align: center;
            color: white;
            line-height: 48px;
            font-size: 36px;
            margin: 10px 10px 0 10px;
            cursor: pointer;
            transition: .2s linear background-color;
            &:active {
              background-color: #909399;
            }
            &:nth-child(11) {
              font-size: 20px;
              background-color: #909399;
              &:active {
                background-color: #C4C9CE;
              }
            }
          }
          .result-btn {
            @extend .number-btn;
            background-color: orange;
          }
        }
      }
    }
  }
</style>

0 3 0

forever-z-133 2019-12-14 03:25:36

一种是 a+b 直接运行结果的，前次算术的结果为下一个算术的 a，直到清零或按等于。
一种是在按清零或等于之前可以尽情输入，最后再进行计算，先括号再乘除再加减。
如果还要带上 sin 或 sqrt 之类的，应该也问题不大。

0 0 0

[js] 请实现一个计算器的功能

那我就来个vue版本的吧，无限接近原生苹果计算器APP哦。