JS簡易計算器的實現，以及代碼的優化

時間 2020-02-13

原文原文鏈接

用JS實現簡易計算器javascript

首先建立結構和樣式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{
            margin:0;
            padding:0;
            background-color: #abcdef;
        }
        .cal{
            width:560px;
            height:100px;
            margin:0 auto;
            padding-top:300px;
        }
    </style>
</head>
<body>

    <div class="cal">
        <p>
            <input type="text" class="num1" value="1">
            <span class="sign">+</span>
            <input type="text" class="num2" value="1">
            <span>=</span>
            <span class="res">2</span>
        </p>
        <p>
            <input type="button" value="+">
            <input type="button" value="-">
            <input type="button" value="*">
            <input type="button" value="/">
        </p>            
    </div>
<script>


</script>

</body>
</html>

添加javascript功能java

<!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{
            margin:0;
            padding:0;
            background-color: #abcdef;
        }
        .cal{
            width:560px;
            height:100px;
            margin:0 auto;
            padding-top:300px;
        }
    </style>
</head>
<body>

    <div class="cal">
        <p>
            <input type="text" class="num1" value="1">
            <span class="sign">+</span>
            <input type="text" class="num2" value="1">
            <span>=</span>
            <span class="res">2</span>
        </p>
        <p>
            <input type="button" value="+" class="btn">
            <input type="button" value="-" class="btn">
            <input type="button" value="*" class="btn">
            <input type="button" value="/" class="btn">
        </p>            
    </div>

<script>
    var cal=document.querySelector(".cal");
    var num1=cal.querySelector(".num1");
    var num2=cal.querySelector(".num2");
    var sign=cal.querySelector(".sign");
    var res=cal.querySelector(".res");

    var btns=cal.querySelectorAll(".btn");

    btns[0].onclick=add;
    btns[1].onclick=subtract;
    btns[2].onclick=multiply;
    btns[3].onclick=divide;

    function add(){
        sign.innerHTML="+";
        //因爲DOM獲取到的值都是字符串形式，所以進行操做時須要先轉爲number類型
        res.innerHTML=Number(num1.value)+Number(num2.value);
    }
    function subtract(){
        sign.innerHTML="-";
        res.innerHTML=Number(num1.value)-Number(num2.value);
    }
    function multiply(){
        sign.innerHTML="*";
        res.innerHTML=Number(num1.value)*Number(num2.value);    
    }
    function divide(){
        sign.innerHTML="/";
        res.innerHTML=Number(num1.value)/Number(num2.value);    
    }
</script>

</body>
</html>

代碼的優化：ide

循環實現綁定函數

給一個外部接口，用於新增運算優化

<!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{
            margin:0;
            padding:0;
            background-color: #abcdef;
        }
        .cal{
            width:560px;
            height:100px;
            margin:0 auto;
            padding-top:300px;
        }
    </style>
</head>
<body>

    <div class="cal">
        <p>
            <input type="text" class="num1" value="1">
            <span class="sign">+</span>
            <input type="text" class="num2" value="1">
            <span>=</span>
            <span class="res">2</span>
        </p>
        <p>
            <input type="button" value="+" class="btn" title="add">
            <input type="button" value="-" class="btn" title="subtract">
            <input type="button" value="*" class="btn" title="multiply">
            <input type="button" value="/" class="btn" title="divide">
            <input type="button" value="%" class="btn" title="mod">
        </p>            
    </div>

<script>
    var cal=document.querySelector(".cal");
    var num1=cal.querySelector(".num1");
    var num2=cal.querySelector(".num2");
    var sign=cal.querySelector(".sign");
    var res=cal.querySelector(".res");

    var btns=cal.querySelectorAll(".btn");

    //給每一個按鈕綁定事件
    for(var i=0;i<btns.length;i++){
        operate(i);
    }

    //運算函數
    function operate(i){
        var op=btns[i].value;//獲取運算
        var opName=btns[i].title;//獲取運算名
        //綁定事件
        btns[i].onclick=function(){
            sign.innerHTML=op;
            res.innerHTML=operation[opName](Number(num1.value),Number(num2.value));
        }
    }

    var operation={
        add:function(n1,n2){
            return n1+n2;
        },
        subtract:function(n1,n2){
            return n1-n2;
        },
        multiply:function(n1,n2){
            return n1*n2;
        },
        divide:function(n1,n2){
            return n1/n2;
        },
        //給一個新增運算的接口
        addOperation:function(name,fn){
            //若是該運算不存在
            if(!this.name){
                this[name]=fn;
            }
        }
    }

    //新增取餘運算
    operation.addOperation("mod",function(n1,n2){
        return n1%n2;
    });
</script>

</body>
</html>