计算器的实现_计算器实现-CSDN博客

本文链接：https://blog.csdn.net/MRslonly/article/details/98496605

计算器的实现：功能实现加减乘除和连加连除连减连乘
html+csss实现页面布局：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border: 1px solid black;
            width: 280px;
            margin: auto;
        }

        td {
            border: 1px solid black;
            width: 70px;
            height: 70px;
        }

        td > button {
            width: 100%;
            height: 100%;
            font-size: 20px;
        }

        td > input[type=text] {
            width: 98.5%;
            height: 100%;
            outline: none;
            text-align: right;
            font-size: 30px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td colspan="4"><input class="scrtext" disabled value="0" type="text"/></td>
    </tr>
    <tr>
        <td colspan="2">
            <button class="btn">c</button>
        </td>
        <td colspan="2">
            <button class="btn">del</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="btn">7</button>
        </td>
        <td>
            <button class="btn">8</button>
        </td>
        <td>
            <button class="btn">9</button>
        </td>
        <td>
            <button class="btn">*</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="btn">4</button>
        </td>
        <td>
            <button class="btn">5</button>
        </td>
        <td>
            <button class="btn">6</button>
        </td>
        <td>
            <button class="btn">/</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="btn">1</button>
        </td>
        <td>
            <button class="btn">2</button>
        </td>
        <td>
            <button class="btn">3</button>
        </td>
        <td>
            <button class="btn">-</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="btn">0</button>
        </td>
        <td>
            <button class="btn">.</button>
        </td>
        <td>
            <button class="btn">+</button>
        </td>
        <td>
            <button class="btn">=</button>
        </td>
    </tr>
</table>
</body>
</html>

js实现：
1.获取所有的按钮绑定事件
2.点击传值到屏幕

<script>
    /*
     * 1.获取所有的按钮  绑定事件
     * 2.点击传值到屏幕
     * isNaN  判断是否是非数字  true  非数字  false 数字
     * indexOf(".")  找小数点    找到返回当前字符的索引位置   没找到返回-1
     * */
    var res = [];//声明空数组
    var isnumber = true;//检测用户是否连续按符号
    var btn = document.querySelectorAll(".btn");
    var screenText = document.getElementsByClassName("scrtext")[0];
    for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
            if (!isNaN(this.innerHTML) || this.innerHTML == ".") {
                isnumber = true;
                if (screenText.value === "0") {
                    if (this.innerHTML == ".") {
                        screenText.value = "0" + this.innerHTML;
                    }
                    else {
                        screenText.value = this.innerHTML;
                    }
                }
                else {
                    if (screenText.value.indexOf(".") == -1) {
                        screenText.value += this.innerHTML;
                    }
                    else {
                        if (this.innerHTML != ".") {
                            screenText.value += this.innerHTML;
                        }
                    }
                }
            }
            else {
                //+ - * / =  c  del
                switch (this.innerHTML) {
                    case "+":
                        showNumber("+");
                        break;
                    case "-":
                        showNumber("-");
                        break;
                    case "*":
                        showNumber("*");
                        break;
                    case "/":
                        showNumber("/");
                        break;
                    case "=":
                        //将最后一个屏幕值 存储
                        res[res.length] = screenText.value;
                        screenText.value = eval(res.join(""));
                        console.log(res);
                        res = [];
                        break;
                    case "c":
                        res = [];
                        screenText.value = "0";
                        break;
                    case "del":
                        //substr 字符串的截取   index   length
                        screenText.value = screenText.value.length > 1 ? screenText.value.substr(0, screenText.value.length - 1) : 0;
                        break;
                }
            }
        }
    }
    //运算的方法
    function showNumber(str) {
        if (isnumber) {
            //存储的是屏幕的值
            res[res.length] = screenText.value;
            //存符号的值
            res[res.length] = str;
            screenText.value = "0";
            isnumber = false;
        }
        else {
            //连续按符号
            res[res.length - 1] = str;
        }

    }
</script>