制作一个简单的计算器，纯原生js写的

最新推荐文章于 2023-04-09 14:33:09 发布

小袁爱前端

最新推荐文章于 2023-04-09 14:33:09 发布

阅读量216

点赞数 2

分类专栏：笔记原生js 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_51270099/article/details/126973564

版权

笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

原生js

3 篇文章 0 订阅

订阅专栏

最基本的计算器，方法简单易看懂，不懂可以留言，注释很全

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .monitor {
            display: block;
            width: 308px;
            height: 50px;
            background-color: rgb(255, 192, 203);
            margin-left: 40px;
            margin-bottom: -17px;
        }

        .name {
            display: flex;
            width: 308px;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .name li {
            width: 100px;
            height: 100px;
            line-height: 100px;
            border: 1px dashed pink;
            list-style: none;
            font-size: 20px;
            text-align: center;

        }

        .name button {
            width: 100px;
            height: 100px;
            line-height: 100px;
            border: 1px dashed pink;
            list-style: none;
            font-size: 20px;
            text-align: center;

        }
    </style>
    <div>
        <input type="text" name="numScreen" id="result" class="monitor" value="0" onfocus="this.flur();"
            disabled="disabled" />
        <ul class="name">
            <li onClick="sz(1)">1</li>
            <li onClick="sz(2)">2</li>
            <li onClick="sz(3)">3</li>
            <li onClick="sz(4)">4</li>
            <li onClick="sz(5)">5</li>
            <li onClick="sz(6)">6</li>
            <li onClick="sz(7)">7</li>
            <li onClick="sz(8)">8</li>
            <li onClick="sz(9)">9</li>
            <button id="jia" onClick='handle("+")'>+</button>
            <button id="jian" onClick='handle("-")'>-</button>
            <button id="cheng" onClick='handle("*")'>*</button>
            <button id="chu" onClick='handle("/")'>/</button>
            <button id="deng" onClick='handle1("=")'>=</button>
            <button id="qingchu" onClick='handle("0")'>清除</button>
        </ul>
    </div>
</head>

<body>
    <script>
        var xianshi = document.getElementsByClassName("monitor")[0]
        var opFlag = true; //控制符号，防止多输入的
        var equFlag = true; //控制数字 0用的


        // + - * /
        function handle(data) {
            if (opFlag) {
                xianshi.value += data;
                opFlag = false;//关闭
                // equFlag = true;
            }
            //清除操作
            if (data == "0") {
                xianshi.value = 0
            }

        }
        //运算
        function handle1(data) {
            xianshi.value = eval(xianshi.value);
            opFlag = true;
            equFlag = false;

        }

        //输入的数字
        function sz(data) {
            if (!equFlag) {
                xianshi.value = "0";
                equFlag = true;
            }
            opFlag = true;
            var str = xianshi.value;
            str=(str=="0"?"":str) //处理清楚时0 用的
            xianshi.value = str + data;
            console.log(str);

        }



    </script>
</body>

</html>

希望对大家有帮助，主要写一个布尔类型的字符串对符号进行控制，还有就是处理清除（清楚）时0的问题。
由于写了一个最基本的计算器，没有写0和小数点的按钮，我觉得和上面的方法类似。