javaScript 联系题（简易计算器）

最新推荐文章于 2022-10-19 11:05:29 发布

一条大鱼

最新推荐文章于 2022-10-19 11:05:29 发布

阅读量682

点赞数 1

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_47053593/article/details/122745206

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建网页calculate.html，具体要求如下

1. 制作一个如下图所示的表单

1. 当用户在运算符的下拉列表框中没有选择具体的运算符时，点击“=”按钮，将在结果文本框中显示相应的提示，如下图所示

1. 当用户选择了具体的运算符之后，点击“=”按钮，将在结果文本框中显示相应的计算结果，如图所示

<!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>
    <script>
        function f() {
            var beichu = document.querySelector("#beichu")
            var one = document.querySelector("#one").value;//获取第一个数的value
            var two = document.querySelector("#two").value;//获取第二个数的value
            var yunsuan = document.querySelector("#yunsuan").value;//获取运算符号
            var result = 0;
            switch (yunsuan) {
                case "+":
                    result = parseInt(one) + parseInt(two);
                    break;
                case "-":
                    result = parseInt(one) - parseInt(two);
                    break;
                case "*":
                    result = parseInt(one) * parseInt(two);
                    break;
                case "/":
                    if (parseInt(one) == 0) {                      
                        beichu.innerHTML = '<font color="red">被除数不能为0</font>'
                    }
                    else {
                        result = parseInt(one) / parseInt(two);                           

                    }

                    break;
                case "%":
                    result = parseInt(one) % parseInt(two);
                    break;
                default:
                    result = "选择正确的运算符";
                    break;
            }
            // 把运算后所得到的数赋值给结果
            document.querySelector("#result").value = result;


        }

    </script>

</head>

<body>

    <table>

        <tr>
            <!-- 第一个数 -->
            <td>
                <input type="text" value="" id="one">
            </td>
            <!-- 选择运算符 -->
            <td>
                <select id="yunsuan">
                    <option value="aaa" selected="">请选择运算符</option>
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                    <option value="%">%</option>
                </select>
            </td>
            <!-- 第二个数 -->
            <td>
                <input type="text" value="" id="two">
            </td>
            <!-- 等号 -->
            <td>
                <input type="button" value="=" onclick="f()">

            </td>
            <!-- 结果 -->
            <td>
                <input type="text" value="" id="result">
                <span id="beichu"></span>
            </td>

        </tr>

    </table>

</body>

</html>

一条大鱼

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaScript 联系题（简易计算器）

创建网页calculate.html，具体要求如下制作一个如下图所示的表单当用户在运算符的下拉列表框中没有选择具体的运算符时，点击“=”按钮，将在结果文本框中显示相应的提示，如下图所示当用户选择了具体的运算符之后，点击“=”按钮，将在结果文本框中显示相应的计算结果，如图所示 <!DOCTYPE html><html lang="en"><head> <meta ch...
复制链接

扫一扫