简易计算器的实现

最新推荐文章于 2022-07-31 14:39:25 发布

Hzzzz_zzzzz

最新推荐文章于 2022-07-31 14:39:25 发布

阅读量274

点赞数

本文链接：https://blog.youkuaiyun.com/Zoey_J/article/details/88997200

版权

这个计算器的实现通过数组存放输入的数据，通过一个flag判断输入的是第一个数还是第二个数，在进行计算，缺点是不能连续输入1+2+3这样的连续计算，但可以在点击“=”后直接进行下一次计算。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简易计算器</title>

        <style>
            body{
                background-color: gainsboro;
            }
            #main {
                width: 400px;
                border: 1px solid grey;
                margin: 30px auto;
                background-color: #f6f6f6;
            }

            #result {
                display: block;
                margin: 5px auto;
                padding: 0 10px;
                width: 360px;
                height: 50px;
                outline: none;
                font-size: 23px;
            }

            table {
                width: 385px;
                margin: 0 auto 10px auto;
                text-align: center;
            }

            table td {
                height: 50px;
                border: 1px solid lightgrey;
                cursor: pointer;
            }
            table td:hover {
                background-color: #E6E6E6;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="text" id="result">

            <table>
                <tr>
                    <td colspan="3">clear</td>
                    <td>÷</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>+</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>.</td>
                    <td colspan="2">=</td>
                </tr>
            </table>
        </div>

        <script>
            var tb = document.getElementsByTagName("table")[0];
            var result = document.getElementById("result");
            var arr = [], num1 = 0, num2 = 0, symbol = "", flag = true, rel = 0;
            result.value = rel;

            for (var i = 0; i < tb.rows.length; i++) {
                for (var j = 0; j < tb.rows[i].cells.length; j++) {
                    tb.rows[i].cells[j].onclick = function () {
                        if (this.innerHTML == "+" || this.innerHTML == "-" || this.innerHTML == "*" || this.innerHTML == "÷") {
                            flag = false;
                            symbol = this.innerHTML;
                            arr = [];
                        }
                        if (flag && (!isNaN(this.innerHTML) | this.innerHTML == ".")) {
                            arr.push(this.innerHTML);
                            result.value = arr.join('');
                            num1 = Number(arr.join(''));
                            flag = true;
                        } else if (!flag && (!isNaN(this.innerHTML) | this.innerHTML == ".")) {
                            arr.push(this.innerHTML);
                            result.value = arr.join('');
                            num2 = Number(arr.join(''));
                        }
                        if (this.innerHTML == "=") {
                            switch (symbol) {
                                case "+":
                                    rel = num1 + num2;
                                    num1 = rel;
                                    break;
                                case "-":
                                    rel = num1 - num2;
                                    num1 = rel;
                                    break;
                                case "*":
                                    rel = num1 * num2;
                                    num1 = rel;
                                    break;
                                case "÷":
                                    rel = num1 / num2;
                                    num1 = rel;
                                    break;
                            }
                            result.value = rel;
                            arr=[];
                        }
                        if(this.innerHTML == "clear"){
                            num1=0;
                            num2=0;
                            arr=[];
                            symbol="";
                            flag=true;
                            rel=0;
                            result.value = rel;
                        }
                    }
                }
            }
        </script>
    </body>
</html>