JS实现简易计算器

最新推荐文章于 2023-04-02 14:42:37 发布

不会编程的师范人

最新推荐文章于 2023-04-02 14:42:37 发布

阅读量169

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44396242/article/details/117751377

版权

在谷歌浏览器中的效果
在这里插入图片描述
实现的逻辑：

<script>
        let numA = document.getElementById('numA');
        let numB = document.getElementById('numB');
        let result = document.getElementById('result');
        let op = document.getElementById('select');
        let selectValue = op.value;
        
        function selectChange(){
            selectValue = op.value;
            opClick();
        }
        function opClick(){
            if(numA.value ==''|| numB.value ==''){
                alert('请先输入操作数!');
                return;
            }
            let a = parseFloat(numA.value);
            let b = parseFloat(numB.value);
            switch (selectValue) {
                case '+':
                    result.value = a + b;
                    break;
                case '-':
                    result.value = a - b;
                    break;
                case '*':
                    result.value = a * b;
                    break;
                case '/':
                    result.value = a / b;
                    break;
                default:
                    alert('计算错误')
                    break;
            }
        } 
    </script>

简易输入框（效果图所示）：

<body>
    <div>
        <input type="text" id="numA">
        <select id="select" onchange="selectChange()">
            <option value="">请选择</option>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" id="numB">
        <span>=</span>
        <input type="text" id="result">
    </div>
    <div>
        <button onclick="opClick()">计算</button>
    </div>
</body>

完整代码：

<!DOCTYPE html>
<html lang="cn">
<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>calculator</title>
    <style>
        div{
            display: flex;
            justify-content: center;
            margin: 35px;
        }
        input{
            margin:0 10px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="numA">
        <select id="select" onchange="selectChange()">
            <option value="">请选择</option>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" id="numB">
        <span>=</span>
        <input type="text" id="result">
    </div>
    <div>
        <button onclick="opClick()">计算</button>
    </div>

    <script>
        let numA = document.getElementById('numA');
        let numB = document.getElementById('numB');
        let result = document.getElementById('result');
        let op = document.getElementById('select');
        let selectValue = op.value;
        
        function selectChange(){
            selectValue = op.value;
            opClick();
        }
        function opClick(){
            if(numA.value ==''|| numB.value ==''){
                alert('请先输入操作数!');
                return;
            }
            let a = parseFloat(numA.value);
            let b = parseFloat(numB.value);
            switch (selectValue) {
                case '+':
                    result.value = a + b;
                    break;
                case '-':
                    result.value = a - b;
                    break;
                case '*':
                    result.value = a * b;
                    break;
                case '/':
                    result.value = a / b;
                    break;
                default:
                    alert('计算错误')
                    break;
            }
        } 
    </script>
</body>
</html>

不会编程的师范人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现简易计算器

在谷歌浏览器中的效果实现的逻辑：<script> let numA = document.getElementById('numA'); let numB = document.getElementById('numB'); let result = document.getElementById('result'); let op = document.getElementById('select'); le
复制链接

扫一扫