【Javascript】入门之实现简易计算

最新推荐文章于 2021-10-11 12:09:22 发布

夹心776655

最新推荐文章于 2021-10-11 12:09:22 发布

阅读量165

点赞数

分类专栏：代码实例 js交互设计文章标签： javascript

本文链接：https://blog.csdn.net/qq_37086980/article/details/110124038

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

描述: 输入两个数, 实现+ - * / % 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>

夹心776655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【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>
复制链接

扫一扫

专栏目录