Java教程

javaScript 联系题（简易计算器）

本文主要是介绍javaScript 联系题（简易计算器），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

创建网页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>

这篇关于javaScript 联系题（简易计算器）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航