前端计算器代码

呈上html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>智障计算器</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <link rel="stylesheet" href="./css/main.less" />
    <script src="./js/vue.js"></script>
    <script src="./js/jquery.js"></script>
    <style>
        body,
        html{
            width: 100%;
            height: 100%;
        }
        #app {
            background: #323846;
            width: 100%;
            height: 100%;
            position: fixed;

        }

        * {
            padding: 0;
            margin: 0;
        }

        p {
            height: 25%;
        }

        .result {
            width: 100%;
            height: 20%;
            text-align: center;
            background: #7e75f4;
            font-size: 100%;
            color: aliceblue;
            text-align: left;
            padding: 10px;
            box-sizing: border-box;

        }

        .btnKuang {
            width: 100%;
            height: 80%;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
        }

        .btnKuang div {
            box-sizing: border-box;
            width: 25%;
            text-align: center;
            padding: 25px;
            font-size: 200%;
            color: aliceblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="result">
            <p>您输入的数字：</p>
            <p id="number"></p>
            <p>所得到的结果：</p>
            <p>{{showResult}}</p>
        </div>
        <div class="btnKuang">
            <div @click="clear()">AC</div>
            <div @click="addNum(1)">1</div>
            <div @click="addNum(2)">2</div>
            <div @click="addNum(3)">3</div>
            <div @click="addition()">＋</div>
            <div @click="addNum(4)">4</div>
            <div @click="addNum(5)">5</div>
            <div @click="addNum(6)">6</div>
            <div @click="subtraction()">－</div>
            <div @click="addNum(7)">7</div>
            <div @click="addNum(8)">8</div>
            <div @click="addNum(9)">9</div>
            <div @click="multiplication()">×</div>
            <div @click="division()">÷</div>
            <div @click="addNum(0)">0</div>
            <div @click="addNum('.')">.</div>
            <div @click="result()">＝</div>
        </div>
    </div>
    <script src="./js/main.js"></script>
</body>

</html>

js代码：

var app = new Vue({
  el: "#app",
  data: {
    numValue: null, //输入的数值
    first: null, //第一位数的值
    showResult: null, //显示的结果
    Symbols: 0, //使用第几个运算方法
  },
  methods: {
    //归零
    clear() {
      this.showResult = null;
      this.Symbols = 0;
      // this.clearArray();
      $("#number").html('');
    },
    addNum(i) {
      //显示输入的数值
      var temp = $("#number").html();
      $("#number").html("");
      $("#number").append(temp + i);
      this.num.push(i);
    },
    //获取数值
    numString() {
      //直接把字符串转成数值
      this.numValue = parseFloat($("#number").html());
    },
    //计算符号之前的结果
    Caculation() {
      this.numString();
      if (this.numValue > 0) {
        //若存在则获得输入的数值
        //判断第一位数是否为空
        if (this.first != null) {
          //若不为空，则根据这个数组之前的符合运算;
          if (this.Symbols == 1) {
            //+
            this.first = this.first + this.numValue;
          } else if (this.Symbols == 2) {
            //-
            this.first = this.first - this.numValue;
          } else if (this.Symbols == 3) {
            //*
            this.first = this.first * this.numValue;
          } else if (this.Symbols == 4) {
            // /
            this.first = this.first / this.numValue;
          } else if (this.Symbols == 0) {
            //无符号
            this.first = this.numValue;
          }
        } else {
          this.first = this.numValue;
        }
      } else {
        //若符号前没有数组，则第一位数为上一轮的结果。
        $("#number").html('');
        console.log(`符号前面没有数字不运算；结束运算过程；`);
        this.first = this.showResult;
        return;
      }
      //显示符号之前的运算结果；
      this.showResult = this.first;
      console.log(`符号前面有数字，之前的结果为：` + this.showResult);
    },
    //加法
    addition() {
      this.Caculation();
      $("#number").append(this.showResult);
      $("#number").html(''); //清空输入的部分
      this.Symbols = 1;
    },
    //减法
    subtraction() {
      this.Caculation();
      $("#number").append(this.showResult);
      $("#number").html('');
      this.Symbols = 2;
    },
    //乘法
    multiplication() {
      this.Caculation();
      $("#number").append(this.showResult);
      $("#number").html('');
      this.Symbols = 3;
    },
    //除法
    division() {
      this.Caculation();
      $("#number").append(this.showResult);
      $("#number").html('');
      this.Symbols = 4;
    },
    //等于
    result() {
      this.showResult = this.first;
      this.Caculation();
      this.Symbols = 0;
      $("#number").html('');
    }
  }
});

效果图显示：

点击该地址可以预览一下哦。

https://chenyating.github.io/Mental-retardation-calculator/.

猜你喜欢