计算器

最新推荐文章于 2023-12-17 16:35:32 发布

Study 365 Always

最新推荐文章于 2023-12-17 16:35:32 发布

阅读量157

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/L8676/article/details/100118145

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了一个基于HTML、CSS和JavaScript的简单计算器实现过程。通过解析HTML结构，了解如何使用CSS进行样式设计，以及JavaScript如何处理用户输入和计算逻辑，读者可以学习到网页计算器的基本构建方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述


<!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>
<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>
</body>
</html>