JavaScript （十六）计算器案例

最新推荐文章于 2022-03-12 14:44:44 发布

We_jia

最新推荐文章于 2022-03-12 14:44:44 发布

阅读量369

点赞数

分类专栏： JavaScript 文章标签： JavaScript的计算器案例

本文链接：https://blog.csdn.net/We_jia/article/details/86103500

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

做了一个简单的计算器案例，先看一下效果

将整体的思路，分成8个步骤

绑定click事件
解决一开始是0 再输入小数点拼接和其他值直接拼接的问题
限制小数点的个数
点击+-*/不显示在屏幕上
= 结果运算 eval 数组重置
运算中间需要数组存储数据（动态数组）例子： 9* /
清0 ac
删除 del

<!DOCTYPE html>
<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>  <!--disabled  当input元素加载时禁用此元素-->
    </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>
    //    第一步 绑定按钮的事件，显示在文本框中
    //第二步开始是0 小数点的位置
    var res = []; /*定义一个数组，用来存放运算的数值*/
    var btn = document.getElementsByClassName("btn");
    var text = document.getElementsByClassName("txt")[0];
    for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
            if (!isNaN(this.innerHTML) || this.innerHTML == ".") {  /*判断是数字和小数点*/
                if (text.value == "0") {/*开始是0*/
                    if (this.innerHTML == ".") {   /*开始0 小数点拼接*/
                        text.value = "0" + this.innerHTML;
                    }
                    else {
                        text.value = this.innerHTML;
                        /*如果是其他的数字，直接覆盖0*/
                    }

                }
                else {
                    if (this.innerHTML == ".") {  /*限制小数点的个数*/
                        if (text.value.indexOf(".") == -1) {   /*如果之前没有点，那么小数点直接拼接*/
                            text.value += this.innerHTML;
                        }
                    }
                    else {
                        text.value += this.innerHTML;
                        /* 直接拼接*/
                    }


                }
            }
            else { /*最大的*/
                if (this.innerHTML == "+" || this.innerHTML == "-" || this.innerHTML == "*" || this.innerHTML == "/") {
                    if (res.length != 0) {
                        if (text.value == "0" && isNaN(res[res.length - 1])) {
                            res[res.length - 1] = this.innerHTML;
                        }
                        else {
                            res[res.length] = text.value;
                            res[res.length] = this.innerHTML;

                        }
                    }
                    else {
                        res[res.length] = text.value;
                        res[res.length] = this.innerHTML;
                    }

                    text.value = "0";
                    /*   + - * /  不显示   显示0*/
                }
                else if (this.innerHTML == "=") {
                    res[res.length] = text.value;
                    text.value = eval(res.join(""));
                    res = [];    // 5*9-2   点减号以后才存储54
                }
                else if (this.innerHTML == "ac") {
                    text.value = "0";
                    res = [];
                }


                else {
                    var arr = text.value.split("");
                    arr.pop();
                    if (arr.length == 0) {
                        text.value = "0";
                        return;
                    }
                    text.value = arr.join("");
                }
            }
        }

    }

</script>
</body>
</html>

We_jia

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JavaScript （十六）计算器案例

做了一个简单的计算器案例，先看一下效果将整体的思路，分成8个步骤绑定click事件解决一开始是0 再输入小数点拼接和其他值直接拼接的问题限制小数点的个数点击+-*/不显示在屏幕上 = 结果运算 eval 数组重置运算中间需要数组存储数据（动态数组）例子： 9* / 清0 ac 删除 del &lt;!DOCTYPE htm...
复制链接

扫一扫