一款简易的基于前端三剑客代码制做的计算器

代码+注释一共不到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>
复制代码

欢迎留言交流与指正！