案例12-星期几、分数判断-switch及穿透性的好处



<!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>

</head>

<body>

    <input type="text">

    <button>今天是工作日还是休息日?</button>

    <script>

        /*

            1-5

            6-7

        */

        var btn = document.querySelector('button');

        var txt = document.querySelector('input');

        btn.onclick = function(){

            var value = txt.value;

            switch(value){

                case '1':

                case '2':

                case '3':

                case '4':

                case '5':

                    console.log('今天是工作日');

                    break;

                case '6':

                case '7': 

                    console.log('今天是休息日'); 

            }

        }

        /*

            有时候利用这样的穿透性,可以让我们的代码变得更简洁,性能更好

        */

    </script>

</body>

</html>




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <input type="text">

    <button>今天是工作日还是休息日?</button>

    <script>

        var btn = document.querySelector('button');

        var txt = document.querySelector('input');

        btn.onclick = function(){

            var value = txt.value;

            switch (value) {


                case '1':

                case '2':

                case '3':


                case '4':

                case '5':

                    console.log('今天是工作日');

                    break;

                case '6':

                case '7':

                    console.log('今天是休息日');

                    break;

                default:

                    console.log('以上输入的内容有误');

                    break;

            }

            // if(value === '1' || value === '2' ||value === '3'){

            //     console.log('今天是工作日');

            // }else if(value === '6'||value === '7'){

            //     console.log('今天是休息日');

            // }else{

            //     console.log('以上输入的内容有误');

            // }

            /*

                当以上条件都不满足的时候,我们在if语句中可以使用else

                                            在switch语句中可以使用default

                default 可以写在switch中的任何位置,不过推荐写在最下面

                注意:可以使用switch的时候 我们不推荐使用if .. else if..else


            */

        }

    </script>

</body>

</html>




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <input type="text">

    <button>获取评级</button>

    <script>

        var btn = document.querySelector('button');

        var input = document.querySelector('input');

        btn.onclick = function(){

            var score = input.value;

            /*

                >=90 优秀

                >= 60 良好

                <60 不及格

            */

            // if(score >= 90){

            // }else if(score >= 60){

            // }else if(score < 60 ){

            // }else{

            // }

            /*

                因为score和case后面的value是进行全等的比较的,所以我们不能写score

                又因为score和任何数值进行比较,最后返回的都是布尔值,一旦返回true就说明,

                符合条件,所以在这里,我们直接在switch的括号里面写上最终结果true,

                和case后面的条件进行比较

            */

            switch(true){

                case score >=90 && score <= 100:

                    console.log('优秀');

                    break;

                case score >= 60 && score < 90:

                    console.log('良好');

                    break;

                case score < 60 && score >= 0: 

                    console.log('不及格');

                    break;

                default:

                    console.log('输入的内容有问题');

                    break;

            }

        }

    </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容