js实现简易计算器

最新推荐文章于 2024-08-22 14:32:34 发布

阿呆呆呆呆呆呆

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量105

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2201_75824179/article/details/129825697

版权

文章展示了一个使用HTML构建的简单计算器界面，通过CSS进行样式设计，利用JavaScript处理按钮点击事件及计算逻辑。用户可以点击按钮输入数字和运算符，然后通过等号按钮求解计算结果，清除按钮用于清空显示。

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

1，效果图

2，代码如下：

<style>
        .wrapper {
            width: 200px;
            padding: 8px;
            background-color: #ffd859;
        }

        #box {
            width: 200px;
            height: 50px;
            border: 1px solid gray;
            background-color: #fff;
        }

        .main {
            width: 200px;
            text-align: center;
        }

        button {
            width: 45px;
            margin: 4px 0;
        }
    </style>

<body>
    <div class="wrapper">
        <div id="box"> </div>
        <div class="main">
            <button onclick="dj(1)">1</button>
            <button onclick="dj(2)">2</button>
            <button onclick="dj(3)">3</button>
            <button onclick="dj(4)">4</button>
            <button onclick="dj(5)">5</button>
            <button onclick="dj(6)">6</button>
            <button onclick="dj(7)">7</button>
            <button onclick="dj(8)">8</button>
            <button onclick="dj(9)">9</button>
            <button onclick="dj(0)">0</button>
            <button onclick="dj('+')">+</button>
            <button onclick="dj('-')">-</button>
            <button onclick="dj('*')">x</button>
            <button onclick="dj('/')">/</button>
            <button onclick="res()">=</button>
            <button onclick="res2()">c</button>
        </div>
    </div>
    <script>
        let str = '';
        let _box = document.getElementById('box');
        function dj(add) {
            str += add;
            _box.innerHTML = str;
        }
        function res() {
            let sum = eval(str);
            _box.innerHTML = sum;
            str = '';
        }
        function res2() {
            _box.innerHTML = ''
            str = ''
        }
    </script>

</body>