javaScript 实现计算器通过使用 js 在网页上时间一个简单的计算器，来考察我们的一些基础能力，首先是 `D

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

通过使用 js 在网页上时间一个简单的计算器，来考察我们的一些基础能力，首先是 DOM 操作能力，其次是 JS 的逻辑运算能力，
在这个案例中，我们使用了 switch 进行逻辑分离，使用 type 进行运算的标记，清除计算器使用 clear 方法，通过捕获点击事件来进行逻辑的分发， clickHandler 第一层的判定实际上就是判定我们点击的是我们的数值，通过是否对 type 进行了赋值，来判断是给第一个数值赋值还是给第二个数值赋值，这里我们的实现在使用 = 得到结果的时候没有清空输入框，具体效果如下图：

当我们执行下一次运算的时候，会替换上一次的运算，下面的代码中，我没有粘贴 css 代码，大家可以自由发挥一下，哈哈哈，正好也当做练习了不是~

二话不说，上代码

<body>
    <div class="con clear">
        <input type="text" id="input" value="0" disabled />
        <div class="divs" id="div1">7</div>
        <div class="divs" id="div2">8</div>
        <div class="divs" id="div3">9</div>
        <div class="divs" id="div4">-</div>
        <div class="divs" id="div5">4</div>
        <div class="divs" id="div6">5</div>
        <div class="divs" id="div7">6</div>
        <div class="divs" id="div8">+</div>
        <div class="divs" id="div9">1</div>
        <div class="divs" id="div10">2</div>
        <div class="divs" id="div11">3</div>
        <div class="divs" id="div12">*</div>
        <div class="divs" id="div13">C</div>
        <div class="divs" id="div14">0</div>
        <div class="divs" id="div15">=</div>
        <div class="divs" id="div16">/</div>
    </div>

    <script>
        var divs, input, type;
        var firstValue = 0,
            secondValue = 0,
            result = 0;

        init();

        function init() {
            divs = [].slice.call(document.getElementsByClassName("divs"));
            input = document.getElementById("input");
            divs.forEach(function (item) {
                item.addEventListener("click", clickHandler);
            })
        }

        function clickHandler(e) {
            switch (true) {
                case this.innerHTML < 10 && this.innerHTML >= 0:
                    numberTotal(this.innerHTML);
                    break;
                case this.innerHTML === "=":
                    resultValue();
                    break;
                case this.innerHTML === "C":
                    clear()
                    break;
                case ["+", "-", "*", "/"].includes(this.innerHTML):
                    calculate(this.innerHTML);
                    break;
            }
        }

        function clear() {
            input.value = "0";
            firstValue = 0;
            secondValue = 0;
            type = undefined;
            result=0;
        }


        function numberTotal(n) {
            if(result!=0) result=0;
            if (!type) {
                firstValue = Number(firstValue + n).toString()
                input.value = firstValue;
            } else {
                secondValue = Number(secondValue + n).toString();
                input.value = firstValue + type + secondValue;
            }

        }

        function calculate(_type) {
            if(result!==0){
                firstValue=result;
                result=0;
            }else{
                firstValue =input.value;
            }
            type = _type;
            input.value += _type;
        }

        function resultValue() {
            if(result) return;
            switch (type) {
                case "+":
                    result = Number(firstValue) + Number(secondValue);
                    break;
                case "-":
                    result = firstValue - secondValue;
                    break;
                case "*":
                    result = firstValue * secondValue;
                    break;
                case "/":
                    result = firstValue / secondValue;
                    break;
            }
            input.value += "=" + result;
            firstValue = 0;
            secondValue = 0;
            type = undefined;
        }
    </script>
</body>