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

阿新 • • 發佈：2020-08-07

用JS實現簡易計算器

首先建立結構和樣式

<!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功能

<!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>

程式碼的優化：

迴圈實現繫結

給一個外部介面，用於新增運算

<!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>