JS实现简单的计算器

最新推荐文章于 2024-04-25 09:54:19 发布

StarkLxx

最新推荐文章于 2024-04-25 09:54:19 发布

阅读量194

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_43019242/article/details/117661863

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>

<body>
    <div class="container">
        <input type="text" name="" id="operNumA">
        <select name="" id="select" onchange="selectChange()">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" name="" id="operNumB">
        <span>=</span>
        <input type="text" name="" id="result">
        <button onclick="btnClick()">计算</button>
    </div>
    <script>
        let operNumA = document.getElementById('operNumA');
        let operNumB = document.getElementById('operNumB');
        let result = document.getElementById('result');
        let operSignal = document.getElementById('select');
        let selectValue = operSignal.value;
        function selectChange(e) {
            selectValue = operSignal.value;
            btnClick();
        }
        function btnClick() {
            if (operNumA.value == '' || operNumB.value == '') {
                alert('请输入操作数!');
                return;
            }
            let a = parseFloat(operNumA.value);
            let b = parseFloat(operNumB.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>

效果图

onchange 是指控件的值发生改变且失去焦点时触发的事件

onblur 是不管值有无改变，失去焦点就触发事件

StarkLxx

关注

0
点赞
踩
0

收藏

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

<!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>D.
复制链接

扫一扫