一款簡易的基於前端三劍客代碼製做的計算器

代碼+註釋一共不到200行，是練習交流的必備良藥

主界面以下： ![在這裏插入圖片描述](

操做示意圖：

如下是代碼部分 HTML：

<div>
    <table class="window">
        <tr>
            <td class="window_prompt">輸入 :</td>
            <td><div id="userIn"><div class="text">簡易的計算器</div></div></td>
        </tr>
        <tr>
            <td class="window_prompt">結果是 :</td>
            <td><div id="mathResult"><div class="text">by keats_Coder</div></div></td>
        </tr>
    </table>

    <table id="main">
        <tr>
            <td colspan="2" id="clear">C</td>
            <td id="back">退格</td>
            <td id="operator4">/</td>
        </tr>
        <tr>
            <td id="num7" class="num">7</td>
            <td id="num8" class="num">8</td>
            <td id="num9" class="num">9</td>
            <td id="operator3">x</td>
        </tr>
        <tr>
            <td id="num4" class="num">4</td>
            <td id="num5" class="num">5</td>
            <td id="num6" class="num">6</td>
            <td id="operator2">-</td>
        </tr>
        <tr>
            <td id="num1" class="num">1</td>
            <td id="num2" class="num">2</td>
            <td id="num3" class="num">3</td>
            <td id="operator1">+</td>
        </tr>
        <tr>
            <td id="minus">±</td>
            <td id="num0" class="num">0</td>
            <td id="dot">.</td>
            <td id="result">＝</td>
        </tr>
    </table>
</div>
複製代碼

CSS部分：

<style>
        .text{
            float: right;
            height: 30px;
            width: 238px;
            font-size: 20px;
            line-height: 30px;
            color: #aaaaaa;
        }
        div{
            float: left;
            margin-left: 40%;
        }
        .window{
            margin-left: 2px;
            border: black 1px solid;
        }
        .window_prompt{
            width: 70px;
            text-align: right;
        }
        #mathResult,#userIn{
            margin-left: 10px;
            border: black 1px solid;
            height: 30px;
            width: 238px;
            text-align: right;
            font-size: 25px;
            line-height: 30px;
            padding-right: 10px;
        }
        #main td{
            border: black 1px solid;
            height: 50px;
            width: 80px;
            text-align: center;
            font-size: 30px;
        }
        #main td:hover{
            background-color: #dddddd;
        }
        #main td:active{
            background-color: #505050;
        }
    </style>
複製代碼

JavaScript部分：

<script>
        //定義變量存儲用戶當前輸入（即上一個運算符以後，下一個運算符以前）的內容
        var string = "";
        //數組用來存儲用戶在一次運算結束前的全部的數字
        var nums = new Array();
        //數組用來存儲運算符
        var maths = new Array();
        //函數：顯示當前輸入
        function showScreen(){
            document.getElementById("userIn").innerText = string;
        }
        //清除按鈕功能：清除屏幕內容，並重置數據(當前輸入內容,運算符,運算符以前的內容)
        document.getElementById("clear").onclick = function () {
            string = "";
            nums = new Array();
            maths = new Array();
            document.getElementById("userIn").innerHTML = "<div class=\"text\">簡易的計算器</div>";
            document.getElementById("mathResult").innerHTML = "<div class=\"text\">by keats_Coder</div>";
        }
        //退格按鈕功能：刪除當前輸入欄最後一個輸入的數字
        document.getElementById("back").onclick = function () {
            if( string ){
                string = new String(string).substring(0,string.length-1)
            }
            showScreen();
        }
        //小數點
        document.getElementById("dot").onclick = function () {
            string = string + ".";
            showScreen();
        }
        //正負號
        document.getElementById("minus").onclick = function(){
            if (string) {
                string = parseInt(string) * (-1);
            }
            showScreen();
        }
        //運算符功能，1 --> +; 2 --> -; 3 --> *; 4 --> /
        for (var i = 1; i <= 4; i++) {
            document.getElementById("operator"+i).onclick = (function (i){
                return function() {
                    maths.push(i);
                    nums.push(string);
                    string = "";
                    showScreen();
                }
            })(i);
        }
        //數字按鈕
        for (i = 0; i < 10; i++) {
            document.getElementById("num"+i).onclick = (function (i) {
                return function () {
                    string = string + i;
                    showScreen();
                }
            })(i);
        }
        //等號按鈕。運算並顯示結果
        document.getElementById("result").onclick = function () {
            //定義變量-結果
            var result;
            //若是用戶參與運算的只有一個
            if (nums.length == 0) {
                result = string;
            }else {
                //將最後一個數存入數組
                nums.push(string);
                //取出數組中的值進行運算
                for (var i = 0; i < nums.length - 1; i++) {
                    var right = nums[i + 1];
                    var math = maths[i];
                    if (i == 0) {
                        result = nums[0];
                    }
                    switch (math) {
                        case 1:
                            result = parseFloat(result) + parseFloat(right);
                            break;
                        case 2:
                            result = parseFloat(result) - parseFloat(right);
                            break;
                        case 3:
                            result = parseFloat(result) * parseFloat(right);
                            break;
                        case 4:
                            result = parseFloat(result) / parseFloat(right);
                            break;
                    }
                }
            }
            //將結果安排到結果欄
            document.getElementById("mathResult").innerText = result;
            //重置計算器
            string = "";
            nums = new Array();
            maths = new Array();
        }
    </script>
複製代碼

歡迎留言交流與指正！