编程语言
首页 > 编程语言> > Javascript入门之实现简易计算

Javascript入门之实现简易计算

作者:互联网

描述: 输入两个数, 实现+ - * / % 5种操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Switch</title>
</head>
<body>
     <!-- 1.布局, 两个输入框和一个下拉列表选择+ - * / -->
    <div class="calculate">
        Please input two numbers:
        <input type="text" id = "num1">
        <select name="operator" id="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="%">%</option>
        </select>
        <input type="text" id = "num2">
        <button id = "btn">=</button>
        <input type="text" id = "result">
    </div>
    <script>
           /* 
            语法:
                switch(条件/变量){
                    case 结果1:
                        符合结果1的时候执行的代码;
                        break;
                    case 结果2:
                        符合结果2的时候执行的代码;
                        break;
                    case 结果3:
                        符合结果4的时候执行的代码;
                        break;    
                    default:
                        以上结果都不符合的时候执行的代码;
                        break;
                }
            switch: 更适用于条件和结果比较单一的时候
            break: 防止穿透
            如果不加break, 当switch匹配到一个符合的结果的时候,后面的结果都不匹配,直接执行后面所有的代码
        */

        /* 
            1.获取元素 num1,num2, operator and btn
         */
        var num1 = document.getElementById("num1");
        var num2 = document.getElementById("num2");
        var btn = document.getElementById("btn");
        var operator = document.getElementById("operator");
        var result = document.getElementById("result");
        console.log(num1,num2,btn,operator);

        // 2.点击获取事件
        btn.onclick = function(){
            // 3. 获取输入的两个数字和具体的操作
            var firstnum = parseFloat(num1.value);
            var secondnum = parseFloat(num2.value);
            var selectedoperator = operator.value;
            console.log(firstnum, secondnum, selectedoperator);

            // 4.判断所选择的运算符
            switch(selectedoperator){
                // 4.1 加法操作
                case '+':
                    result.value = firstnum + secondnum;
                    break;
                // 4.2 减法操作
                case '-':
                    result.value = firstnum - secondnum;
                    break;
                // 4.3 乘法操作
                case '*':
                    result.value = firstnum * secondnum;
                    break;
                // 4.4 除法操作
                case '/':
                    result.value = firstnum / secondnum;
                    break;
                // 4.5 取余操作
                case '%':
                    result.value = firstnum % secondnum;
                    break;
                // 4.6 默认操作
                default:
                    alert("当前运算结果错误");
                    break;
            }
        }
    </script>
</body>
</html>

 

标签:case,入门,Javascript,secondnum,value,break,简易,result,var
来源: https://blog.csdn.net/qq_37086980/article/details/110124038