四则运算

yang 发布于 2023-5-30 20:40 阅读：495 JS基础阶段
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- 1.画出页面结构 -->
        <h1>四则运算</h1>
        <p>加数1：<input id="num1" type="text" /></p>
        <p>
            运算符:
            <select id="select">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
        </p>
        <p>加数2：<input id="num2" type="text" /></p>
        <button id="btn">计算</button>
        <p>结果：<input id="num3" type="text" /></p>
        <script>
            // 思路：
            // 1.获取加数1和加数2的值
            // num1.value;
            // num2.value;
            // 2.给按钮绑定点击事件onclick
            // console.log(btn);
            btn.onclick = function () {
                // console.log(1);
                let a = Number(num1.value); // 加数1的值
                // console.log(a, typeof a);
                let b = Number(num2.value); // 加数2的值
                console.log(select.value);
                let mark = select.value; // 选择框的值，选择的符号
                let result = 0;
                // 3.根据选择框的运算符进行判断（多分支），进行对应的运算
                if (mark === "+") {
                    // 加法
                    result = a + b;
                } else if (mark === "-") {
                    // 减法
                    result = a - b;
                } else if (mark === "*") {
                    // 乘法
                    result = a * b;
                } else if (mark === "/") {
                    // 除法
                    result = a / b;
                }
                // 4.运算结果放入结果的输入框
                num3.value = result;
            };
        </script>
    </body>
</html>
四则运算
扫描二维码，在手机上阅读