html_small_case
/
【Vue】制作新拟态计算器.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #eee;
      }
      .calculator {
        --button-width: 80px;
        --button-height: 80px;

        display: grid;
        grid-template-areas:
          "result result result result"
          "ac plus-minus percent divide"
          "number-7 number-8 number-9 multiply"
          "number-4 number-5 number-6 subtract"
          "number-1 number-2 number-3 add"
          "number-0 number-0 dot equal";
        grid-template-columns: repeat(4, var(--button-width));
        grid-template-rows: repeat(6, var(--button-height));

        box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1),
          8px 8px 16px -10px rgba(0, 0, 0, 0.15);
        padding: 24px;
        border-radius: 20px;
      }

      .calculator button {
        margin: 8px;
        padding: 0;
        border: 0;
        display: block;
        outline: none;
        border-radius: calc(var(--button-height) / 2);
        font-size: 24px;
        font-family: Helvetica;
        color: #999;
        background: linear-gradient(
          135deg,
          rgba(230, 230, 230, 1) 0%,
          rgba(246, 246, 246, 1) 100%
        );
        box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1),
          4px 4px 10px -8px rgba(0, 0, 0, 0.3);
      }

      .calculator button:active {
        box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset,
          4px 4px 10px -8px rgba(0, 0, 0, 0.3) inset;
      }
      .result {
        text-align: right;
        line-height: var(--button-height);
        font-size: 48px;
        font-family: Helvetica;
        padding: 0 20px;
        color: #666;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="calculator">
        <div class="result" style="grid-area: result;">{{equation}}</div>

        <button style="grid-area: ac;" @click="clear">AC</button>
        <button style="grid-area: plus-minus;" @click="calculateToggle">
          ±
        </button>
        <button style="grid-area: percent;" @click="calculatePercentage">
          %
        </button>
        <button style="grid-area: add;" @click="append('+')">+</button>
        <button style="grid-area: subtract;" @click="append('-')">-</button>
        <button style="grid-area: multiply;" @click="append('x')">x</button>
        <button style="grid-area: divide;" @click="append('÷')">÷</button>
        <button style="grid-area: equal;" @click="calculate">=</button>

        <button style="grid-area: number-1;" @click="append('1')">1</button>
        <button style="grid-area: number-2;" @click="append('2')">2</button>
        <button style="grid-area: number-3;" @click="append('3')">3</button>
        <button style="grid-area: number-4;" @click="append('4')">4</button>
        <button style="grid-area: number-5;" @click="append('5')">5</button>
        <button style="grid-area: number-6;" @click="append('6')">6</button>
        <button style="grid-area: number-7;" @click="append('7')">7</button>
        <button style="grid-area: number-8;" @click="append('8')">8</button>
        <button style="grid-area: number-9;" @click="append('9')">9</button>
        <button style="grid-area: number-0;" @click="append('0')">0</button>

        <button style="grid-area: dot;" @click="append('.')">.</button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            equation: "0",
            isDecimalAdded: false,
            isOperatorAdded: false,
            isStarted: false
          };
        },
        methods: {
          //  判断character是+ | - | x | ÷ 其中一个
          isOperator(character) {
            return ["+", "-", "x", "÷"].indexOf(character) > -1;
          },
          // 点击+ | - | x | ÷ | . 的时候
          append(character) {
            if (this.equation === "0" && !this.isOperator(character)) {
              if (character === ".") {
                this.equation += "" + character;
                this.isDecimalAdded = true;
              } else {
                this.equation = "" + character;
              }
              this.isStarted = true;
              return;
            }
            //  当点击的是小数点的时候
            if (!this.isOperator(character)) {
              if (character === "." && this.isDecimalAdded) {
                return;
              }
              if (character === ".") {
                this.isDecimalAdded = true;
                this.isOperatorAdded = true;
              } else {
                this.isOperatorAdded = false;
              }
              this.equation += "" + character;
            }
            //  当点击的是运算符的时候
            if (this.isOperator(character) && !this.isOperatorAdded) {
              this.equation += "" + character;
              this.isDecimalAdded = false;
              this.isOperatorAdded = true;
            }
          },
          //  点击=的时候
          calculate() {
            let result = this.equation
              .replace(new RegExp("x", "g"), "*")
              .replace(new RegExp("÷", "g"), "/");
            this.equation = parseFloat(eval(result).toFixed(9));
            this.isDecimalAdded = false;
            this.isOperatorAdded = false;
          },
          //  点击±的时候
          calculateToggle() {
            if (this.isOperatorAdded || !this.isStarted) {
              return;
            }
            this.equation = this.equation + "* -1";
            this.calculate();
          },
          //  点击%的时候
          calculatePercentage() {
            if (this.isOperatorAdded || !this.isStarted) {
              return;
            }
            this.equation = this.equation + "* 0.01";
            this.calculate();
          },
          //  点击AC的时候
          clear() {
            this.equation = "0";
            this.isDecimalAdded = false;
            this.isOperatorAdded = false;
            this.isStarted = false;
          }
        }
      });
    </script>
  </body>
</html>