JS实现计算器

最新推荐文章于 2024-04-25 09:54:19 发布

我是你要找的bug

最新推荐文章于 2024-04-25 09:54:19 发布

阅读量357

点赞数

分类专栏：计算器文章标签： js

本文链接：https://blog.csdn.net/XUYIGE/article/details/104133879

版权

计算器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

HTML部分代码：

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

        .js_par {
            width: 350px;
            height: 500px;
            margin: auto;
            background: #D9E4F1;
        }

        table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            border: 1px solid silver;
        }

        table td {
            width: 50px;
            height: 50px;
        }

        .txt {
            width: 99%;
            height: 50px;
            font-size: 1.5rem;
            text-align: right;
            border-style: none;
        }

        .reg {
            width: 99%;
            height: 25px;
            font-size: 1.1rem;
            text-align: right;
            border-style: none;
        }

        button {
            width: 100%;
            height: 100%;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
<div class="js_par">
    <table cellspacing="10">
        <tr>
            <td colspan="5">
                <input type="text" class="reg" value="" disabled/>
                <input class="txt" value="0" disabled type="text"/>
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn">DEL</button>
            </td>
            <td colspan="2">
                <button class="btn">C</button>
            </td>
            <td>
                <button class="btn">+/-</button>
            </td>
            <td>
                <button class="btn">Sqrt</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>
            <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>
            <td>
                <button class="btn">1/x</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>
            <td rowspan="2">
                <button class="btn">=</button>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button class="btn">0</button>
            </td>
            <td>
                <button class="btn">.</button>
            </td>
            <td>
                <button class="btn">+</button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

JS部分代码：

<script>
    /*添加所有按钮事件*/
    window.onload = function () {
        var btn = document.getElementsByClassName("btn");
        var txt = document.getElementsByClassName("txt")[0];
        var reg = document.getElementsByClassName("reg")[0];
        var arr = [];//记录用户的按键  最终构成表达式
        var isactive = false;//用户按符号的状态
        var isdeng = false;//在等号  处理覆盖值的关键变量
        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 (isdeng) {
                            txt.value = this.innerHTML;
                            isdeng = false;
                            isactive=false;
                        }
                        else {
                            if (!isactive) {
                                if (txt.value.indexOf(".") != -1 && this.innerHTML == ".") {
                                    return;
                                }
                                txt.value += this.innerHTML;
                            }
                            else if (isactive) {
                                if (this.innerHTML == ".") {
                                    txt.value = "0" + this.innerHTML;
                                }
                                else {
                                    txt.value = this.innerHTML;
                                }
                                isactive = false;
                            }
                        }
                    }
                }
                else {
                    //剩下的符号
                    switch (this.innerHTML) {
                        case "DEL":
                            if (!isdeng)
                                txt.value = txt.value.length > 1 ? txt.value.substr(0, txt.value.length - 1) : "0";
                            break;
                        case "C":
                            arr = [];
                            txt.value = "0";
                            isactive = false;
                            isdeng = false;
                            break;
                        case "=":
                            //计算之后的答案
                            //把屏幕的值做最后一次追加
                            arr[arr.length] = txt.value;
                            //计算表达式的方法  eval
                            var res = eval(arr.join("")); // 转化成表达式  eval计算表达式  
                            txt.value = res;
                            reg.value = "";
                            arr = []; //清空之前的计算结果
                            isdeng = true;//在等号之后处理+=按的数字  如果该为true 类似在上面按数字
                            break;
                        case "+/-":
                            txt.value *= -1;
                            break;
                        case "1/x":
                            txt.value = (1 / txt.value);
                            break;
                        case "Sqrt":
                            txt.value = Math.sqrt(txt.value);
                            break;
                        default :
                            method(this.innerHTML);
                            break;
                    }
                    function method(f) {
                        //连续按符号  在true之前处理
                        console.log(isactive);
                        if (isactive) {
                            arr[arr.length - 1] = f;
                            console.log("用户在连续按符号！");
                        }
                        else {
                            //存储当前用户输入的值和符号
                            arr[arr.length] = txt.value;
                            arr[arr.length] = f;
                        }
                        reg.value = arr.join(""); //转换成表达式
                        isactive = true;
                    }
                }
            }
        }
    }
</script>

我是你要找的bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS实现计算器

HTML部分代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; p...
复制链接

扫一扫

专栏目录