JS 做一个简易计算器

最新推荐文章于 2024-02-27 16:51:47 发布

叫我魏什么

最新推荐文章于 2024-02-27 16:51:47 发布

阅读量201

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Lou__Lan/article/details/127660029

版权

<!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>
</head>
<style>
   
    #toCalculate {
        width: 294px;
        height: 300px;
        margin: 20px auto;
    }

    table {
        border-collapse: collapse;
        border: 1px solid rgb(120, 120, 120);

    }

    td {
        border: 2px solid #fff;
        background-color: rgb(50, 134, 244);
    }

    tr:not(tr:nth-of-type(1)) td:first-of-type {
        width: 90px;
        text-align: right;
    }

    tr td:nth-of-type(2) {
        width: 130px;
    }

    tr td:nth-of-type(2) input {
        width: 80px;
    }

    tr td:nth-of-type(3) {
        width: 60px;
        text-align: center;
    }

    tr td:nth-of-type(3) button {
        width: 50px;
    }
</style>

<body>
    <div id="toCalculate">
        <table>
            <tr style="height:50px ;">
                <td colspan='4'>计算器</td>
            </tr>
            <tr>
                <td>第一个数</td>
                <td><input type="text" id="inputOne" /></td>
                <td rowspan="3">
                    <button onclick="option('+')" id="addBtn">+</button>
                    <button onclick="option('-')" id="minusBtn">-</button>
                    <button onclick="option('*')" id="multiplyBtn">*</button>
                    <button onclick="option('/')" id="divisionBtn">/</button>
                </td>
            </tr>
            <tr>
                <td>第二个数</td>
                <td><input type="text" id="inputTwo" /></td>
            </tr>
            <tr>
                <td>计算结果</td>
                <td><input type="text" id="inputThree" /></td>
            </tr>
        </table>
    </div>
    <script>
        function option(op) { 
            let inputResOne = document.querySelector('#inputOne'); // 获取运算符按钮的节点
            let inputResTwo = document.querySelector('#inputTwo');
            let inputResult = document.querySelector('#inputThree');
            switch (op) {
                case '+':
                    inputResult.value = +(inputResOne.value) + +(inputResTwo.value)
                    break;
                case '-':
                    inputResult.value = inputResOne.value - inputResTwo.value
                    break;
                case '*':
                    inputResult.value = inputResOne.value * inputResTwo.value
                    break;
                case '/':
                    if (inputResTwo.value != 0) {
                        inputResult.value = inputResOne.value / inputResTwo.value
                    } else {
                        alert('被除数不能为0')
                    }
            }
        }
    </script>
</body>

</html>