Html+css+Jscript写一个计算器

最新推荐文章于 2024-09-07 13:38:28 发布

kyrie Iv

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量112

点赞数 1

文章标签： javascript 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_64411066/article/details/129661384

版权

该文章展示了一个使用JScript编写的HTML计算器示例。计算器功能包括数字输入、运算符选择、结果计算以及清除操作。通过点击事件处理按钮，将操作显示在页面的p标签中，并利用JavaScript的eval函数进行计算。

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

Jscript写一个计算器功能：

完整代码：

<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>
</head>
<style>
    #div1 {
        width: 300px;
        border: 1px solid red;
        margin: 0 auto;
    }

    p {
        width: 100%;
        height: 150px;
        background-color: #ccc;
        margin: 0;
        font-size: 30px;
        line-height: 150px;
    }

    #div2 {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    button {
        width: 70px;
        height: 60px;
        margin: 5px 1px;
    }
</style>

<body>
    <div id="div1">
        <p id="p1"></p>
        <div id="div2">
            <!-- 给每一个都绑定点击事件，并且传入参数，后续接收 -->
            <button onclick="num(1)">1</button>
            <button onclick="num(2)">2</button>
            <button onclick="num(3)">3</button>
            <button onclick="cler()">C</button>
            <button onclick="num(4)">4</button>
            <button onclick="num(5)">5</button>
            <button onclick="num(6)">6</button>
            <button onclick="num('*')">x</button>
            <button onclick="num(7)">7</button>
            <button onclick="num(8)">8</button>
            <button onclick="num(9)">9</button>
            <button onclick="num('/')">/</button>
            <button onclick="num('+')">+</button>
            <button onclick="num('-')">-</button>
            <button onclick="num(0)">0</button>
            <button onclick="result('=')">=</button>
        </div>
    </div>
</body>
<script>
    var p1 = document.querySelector('#p1');
    function num(e) {
        //接收参数并且显示到p标签上
        p1.innerHTML = p1.innerHTML + e;
    }
    function result() {
        //eval函数
        val = eval(p1.innerHTML);
        p1.innerHTML = val;
    }
    function cler() {
        //清除
        p1.innerHTML = '';
    }
</script>

</html>

效果如下：