JavaScript 一个简易计算器（实现两个数的加、减、乘、除）

HOROSHI

已于 2022-05-19 12:33:06 修改

阅读量2.7k

点赞数 5

文章标签： javascript html css 前端

于 2022-05-17 21:55:38 首次发布

本文链接： https://blog.csdn.net/weixin_45901736/article/details/124830968

版权

这篇文章介绍了如何使用JavaScript编写一个简单的计算器，用户可以进行基本的加减乘除运算。通过HTML和CSS布局，配合JavaScript的switch语句处理不同运算，展示了前端开发中基础的交互功能。

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

  <style>
        div {
            height: 250px;
            width: 500px;
            margin: 50px 500px;
            background-color: rgb(155, 155, 155);
            border: 3PX solid blacK;
        }

        h3 {
            display: inline-block;
            margin-top: 30px;
            margin-left: 30px;
        }

        input {
            width: 80px;
            height: 40px;
            border-radius: 8px 8px 8px 8px;
        }

        button {

            width: 50px;
            height: 50px;
            margin-left: 50px;
            margin-top: 40px;
            font-size: 30px;
            background-color: rgb(255, 159, 159);
        }

        .btn:hover {
            color: blue;
        }

        .result {
            margin-left: 150px;
        }
    </style>

<script>
        function cal(type) {
            var obj1 = document.getElementById('num1');
            var obj2 = document.getElementById('num2');
            switch (type) {
                case '+':
                    var result = parseInt(obj1.value) + parseInt(obj2.value);
                    break;
                case '-':
                    var result = parseInt(obj1.value) - parseInt(obj2.value);
                    break;
                case '*':
                    var result = parseInt(obj1.value) * parseInt(obj2.value);
                    break;
                case '/':
                    var result = parseInt(obj1.value) / parseInt(obj2.value);
                    break;

            }
            var resultobj = document.getElementById('resultid');
            resultobj.value = result;
        }
        cal();
    </script>


<body>
    <div>
        <h3>number1:</h3><input type="test" value="" id="num1">
        <h3>number2:</h3><input type="test" value="" id="num2"><br>
        <button onclick="cal('+')" class="btn">+</button>
        <button onclick="cal('-')" class="btn">-</button>
        <button onclick="cal('*')" class="btn">*</button>
        <button onclick="cal('/')" class="btn">/</button><br>
        <h3 class="result">result:</h3><input type="test" id="resultid" value="">
    </div>
</body>

*做加法