JavaScript的入门练习（三）

最新推荐文章于 2024-02-29 09:35:58 发布

一只寅

最新推荐文章于 2024-02-29 09:35:58 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/m0_51152368/article/details/117740962

版权

练习一：使用JS完成简易计算器
要求：输入的值只能是数字
onchange():值改变时执行事件
onblur():鼠标移出时执行事件

代码如下：


<!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>
        <!-- input.onclick =btnClick -->
        <!-- 指定input元素对象的click事件处理程序为btnClick，即绑定 -->
        <!-- input.onclick(） -->
        <!-- 触发input元素对象的click事件，即相当于点击这个input元素 -->
    </div>
    <script>
        // getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。如果没有指定 ID 的元素返回 null,如果存在多个指定 ID 的元素则返回第一个。
        let operNumA = document.getElementById('operNumA');
        let operNumB = document.getElementById('operNumB');
        let result = document.getElementById('result');
        let operSignal = document.getElementById('select');
        let selectValue = operSignal.value;//SelectedValue 属性表示列表中选定项的值。
        function selectChange(e) {
            selectValue = operSignal.value;
            btnClick();
        }
        function btnClick() {
            if (operNumA.value == '' || operNumB.value == '') {
                alert('请输入操作数!');
                return;
            }
            let a = parseFloat(operNumA.value);//parseFloat() 函数可解析一个字符串，并返回一个浮点数。
            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>