JavaScript写计算器案例

写一个计算器，实现加减乘除的功能。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table {
            border-collapse: collapse;
            width: 400px;
            margin: 0 auto;
            border: 1px solid silver;
        }

        table td {
            border: 1px solid silver;
        }

        button[name="btnclick"] {
            width: 100px;
            height: 60px;
            font-size: 25px;
        }

        button[name="btnall"] {
            width: 100%;
            height: 60px;
            font-size: 25px;
        }

        .txt {
            width: 99%;
            height: 80px;
            outline: none;
            font-size: 30px;
            text-align: right;
            background-color: white;
            border-style: none;
        }

    </style>
</head>
<body>
<table>
    <tr>
        <td colspan="4"><input class="txt" type="text" disabled value="0"/></td>
    </tr>
    <tr>
        <td colspan="2">
            <button name="btnall" class="btn">ac</button>
        </td>
        <td colspan="2">
            <button name="btnall" class="btn">del</button>
        </td>
    </tr>
    <tr>
        <td>
            <button name="btnclick" class="btn">7</button>
        </td>
        <td>
            <button name="btnclick" class="btn">8</button>
        </td>
        <td>
            <button name="btnclick" class="btn">9</button>
        </td>
        <td>
            <button name="btnclick" class="btn">*</button>
        </td>
    </tr>
    <tr>
        <td>
            <button name="btnclick" class="btn">4</button>
        </td>
        <td>
            <button name="btnclick" class="btn">5</button>
        </td>
        <td>
            <button name="btnclick" class="btn">6</button>
        </td>
        <td>
            <button name="btnclick" class="btn">/</button>
        </td>
    </tr>
    <tr>
        <td>
            <button name="btnclick" class="btn">1</button>
        </td>
        <td>
            <button name="btnclick" class="btn">2</button>
        </td>
        <td>
            <button name="btnclick" class="btn">3</button>
        </td>
        <td>
            <button name="btnclick" class="btn">-</button>
        </td>
    </tr>
    <tr>
        <td>
            <button name="btnclick" class="btn">0</button>
        </td>
        <td>
            <button name="btnclick" class="btn">.</button>
        </td>
        <td>
            <button name="btnclick" class="btn">+</button>
        </td>
        <td>
            <button name="btnclick" class="btn">=</button>
        </td>
    </tr>
</table>
<script>
    var res = [];
    var btn = document.getElementsByClassName("btn");
    var txt = document.getElementsByClassName("txt")[0];
    for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
            if (!isNaN(this.innerHTML) || this.innerHTML == ".") {
                if (txt.value == "0") {
                    if (this.innerHTML == ".") {
                        txt.value = "0" + this.innerHTML;
                    }
                    else {
                        txt.value = this.innerHTML;
                    }
                }
                else {
                    if (this.innerHTML == ".") {
                        if (txt.value.indexOf(".") == -1) {
                            txt.value += this.innerHTML;
                        }
                    }
                    else {
                        txt.value += this.innerHTML;
                    }
                }
            }
            else {
                if (this.innerHTML == "+" || this.innerHTML == "-" || this.innerHTML == "*" || this.innerHTML == "/") {

                    if (res.length != 0) {
                        if (txt.value == "0" && isNaN(res[res.length - 1])) {
                            res[res.length - 1] = this.innerHTML;
                        }
                        else {
                            res[res.length] = txt.value;
                            res[res.length] = this.innerHTML;
                        }
                    }
                    else {
                        res[res.length] = txt.value;
                        res[res.length] = this.innerHTML;
                    }
                    txt.value = "0";
                }
                else if (this.innerHTML == "=") {
                    res[res.length] = txt.value;
                    txt.value = eval(res.join(""));
                    res = [];
                }
                else if (this.innerHTML == "ac") {
                    txt.value = "0";
                    res = [];
                }
                else {
                    var arr = txt.value.split("");
                    arr.pop();
                    if (arr.length == 0) {
                        txt.value = "0";
                        return;
                    }
                    txt.value = arr.join("");
                }
            }
        }
    }
</script>
</body>
</html>
JavaScript写计算器案例

猜你喜欢
