博主信息
博文 15
粉丝 0
评论 1
访问量 17965
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JavaScript基本语法-流程控制(IF-Switch)、for循环、while循环
楚Chen
原创
1119人浏览过

JavaScript流程控制

流程控制-IF

实例

<!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>
    <script type="text/javascript">
        var x = 1;
        if (x == 1) {
            var s = "今天星期一";
        } else if (x == 2) {
            var s = "今天星期二";
        } else if (x == 3) {
            var s = "今天星期三";
        } else if (x == 4) {
            var s = "今天星期四";
        } else if (x == 5) {
            var s = "今天星期五";
        } else if (x == 6) {
            var s = "今天星期六";
        } else if (x == 7) {
            var s = "今天星期日";
        } else {
            var s = "你的输入有误";
        }
        console.log(s);       
    </script>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

流程控制,if语句单分支
 if (条件判断语句) {
       循环代码
 }

单分支通过条件判断语句,如果结果为true就执行循环体内的代码。返回false就退出循环

分支

 if (条件判断语句) {
       .......
 }else{

    ........

}

双分支通过条件判断语句,如果结果为true就执行第一个段代码。返回false就执行else后面的代码

多分支

 if (条件判断语句) {
       ......
 }else if{

    ........

}else{

    ..........

}

多分支可以有多条条件判断,如果第一个条件返回true,则执行第一段代码。然后退出循环

第一个条件返回false,则继续向下执行第二条条件判断语句........如果所有条件都为false就执行else后面的代码

流程控制-Switch

对于if的多分支语法,也可以使用switch来实现

实例

<!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>
    <script type="text/javascript">
     
        //使用 switch 重写上面小案例
        switch (true) {
            case x == 1:
                var s = "今天星期一";
                break;
            case x == 2:
                var s = "今天星期二";
                break;
            case x == 3:
                var s = "今天星期三";
                break;
            case x == 4:
                var s = "今天星期四";
                break;
            case x == 5:
                var s = "今天星期五";
                break;
            case x == 6:
                var s = "今天星期六";
                break;
            case x == 7:
                var s = "今天星期日";
                break;
            default:
                var s = "输入错误参数";
                break;
        }
        
        console.log(s);
      
    </script>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

switch(true) {

    case    条件判断;

        执行代码;

        break;    跳出循环

    

    case    条件判断2;

        执行代码;

        break;    跳出循环

    efault:
         如果都返回false要执行的代码;
         break;

}

JavaScript循环

for循环

实例

<!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>
    <script type="text/javascript">
        //循环
        // For循环
        for ( x ; x <= 7; x++) {
            
            console.log("今天星期"+x+"<br>"+"<hr>");
            
        }  
    </script>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

for循环语句

for (初始化; 循环条件; 更新条件){

循环体

}

while循环

实例

<!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>
    <script type="text/javascript">
      
        //使用 While 循环重写上面小案例
        x = 1;
        while ( x<=7) {
            console.log("今天星期"+x+"<br>"+"<br>");
            x++;
        }       
    </script>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

while循环语句

while (条件判断) {

    执行代码

i++;    // 更新条件

}



批改状态:合格

老师批语:还有一个关于我们的页面作业呢?
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学