JS（基础）流程控制_用js打印50份试卷,每打印一份试卷,给出“现在打印第几份试卷”的提示-CSDN博客

本文链接：https://blog.csdn.net/weixin_55345305/article/details/114797689

流程控制

顺序结构：代码从上往下逐行执行
分支结构：代码根据一定的条件，有选择性的执行
循环结构：代码根据一定的条件，重复执行

分支结构

<!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>分支结构if</title>
</head>
<body>
    
</body>
</html>
<script>
    // 分支结构：
    // 格式1（单分支）：if(条件){满足条件执行的代码}
    /*
    var x = 5;
    var y = 8;
    if (x > y) {
        console.log("x比y大");
    }
    */

    // 格式2（双分支）：if(条件){满足条件执行的代码}else{不满足条件执行的代码}
    /*
    var x = 5;
    var y = 8;
    if (x > y) {
        console.log("x比y大");
    } else {
        console.log("x比y小（或者相等）");
    }
    */
    
    // 格式3（多分支）：if(条件){代码}else if(条件){代码} …… else{都不满足执行的代码}
    // PS：写 < 的话，条件一般从小往大排（写 > 的话，条件一般从大往小排）
    // PS：其中一个条件满足，其他代码均不执行
    /*
    var score = 95;
    if (score > 90) {
        console.log("优秀");
    } else if (score > 80) {
        console.log("良好");
    } else if (score > 70) {
        console.log("中等");
    } else if (score > 60) {
        console.log("及格");
    } else{
        console.log("不及格");
    }
    */


    // 分支结构可以嵌套
    // 比如招工：性别男性，年龄20-40
    var gender = "女";
    var age = 28;
    if (age >= 20 && age <= 40) {
        if (gender == "男") {
            console.log("招");
        } else {
            console.log("不招");
        }
    } else {
        console.log("不招");
    }

</script>

循环结构（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>循环结构for</title>
</head>
<body>
    
</body>
</html>
<script>
    // 格式：for(初始条件;循环条件;增量/步长){循环体}
    // 例如：
    // for(var i = 0; i < 10; i++){
    // }

    /*
    for循环执行流程：
    1.执行初始条件：var i = 0; （初始条件只执行一次）
    2.执行循环的判断条件：i < 10; 
                        若成立：执行第3步
                        若不成立：跳出for循环
    3.执行循环体{}里面的代码
    4.执行增量/步长：i++; ==> 执行第2步
    */
    // for(var i = 0; i < 10; i++){
    //     console.log("打印第几份试卷");
    // }

    // PS：for循环有几个地方可以修改的：
    // 1.初始条件可以写在上面 2.i++可以写在循环体里 3.小括号中的两个分号不能省略 4.当for执行完毕i的值等于判断条件的值
    // var i = 0;
    // for (; i < 10; ) {
    //     console.log("打印第几份试卷");
    //     i++;
    // }
    // console.log(i);

    // 在for循环体里面可以使用循环变量
    // for(var i = 0; i < 10; i++){
    //     // console.log("i = " + i);
    //     console.log("打印第" + (i + 1) + "份试卷");
    // }

    // 在使用for循环时，尽量避免出现死循环
    // for(var i = 10; i >= 0; i++){
    //     console.log(i);
    // }
    // for(var i = 0; i < 10; i--){
    //     console.log(i);
    // }

    // for循环中可以使用分支结构
    // for (var i = 0; i < 100; i+=2) {
    //     console.log(i);
    // }
    // for(var i = 0; i < 100; i++){
    //     if (i % 2 == 0) {
    //         console.log(i);
    //     }
    // }

    // for循环中还可以嵌套for循环
    // for(var i = 0; i < 10; i++){
    //     // 外层i循环，控制内层循环执行10次
    //     for (var j = 0; j < 10; j++) {
    //         console.log(j);
    //     }
    // }

    // 内层for循环可以使用外层for循环的变量
    for (var i = 0; i < 10; i++) {
        var str = "";
        for (var j = 0; j < i + 1; j++) {
            // 控制每一行有几个星星
            str += "⭐";
        }
        // 一共会打印10行
        console.log(str);
    }
    // 打印在网页上
    for(var i = 0; i < 10; i++){
        for (var j = 0; j < i + 1; j++) {
            document.write("⭐");
        }
        document.write("<br>");
    }
    
    /*
    第一次
    i = 0; i < 10;
        j = 0; j < 0+1;
        console.log(0);
        j++=1; j < 0+1;

    第二次
    i++=1; i < 10;  
        j = 0; j < 1+1;
        console.log(0);
        j++=1; j < 1+1;
        console.log(1);
        j++=2; j < 1+1
    第三次
    ……
    */
</script>

循环结构（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>循环结构while</title>
</head>
<body>
    
</body>
</html>
<script>
    // 格式：初始条件 while(循环条件){循环体，增量/步长}
    // var i = 0;
    // while(i < 10) {
    //     console.log("打印第" + (i + 1) + "份试卷");
    //     i++;
    // }

    // while和for使用场景：
    // for循环常用于循环次数固定或者循环次数已知的情况下。
    // while循环常用于目标明确，但循环次数未知的情况下。

    // 例：已知2021王叔叔家有50只兔子，按照每年10%的增长速度，请问到哪一年王叔叔家的兔子能突破100只？
    var year = 2021;
    var count = 50;
    while(count < 100){
        year++;
        count *= 1.1;
    }
    console.log(year);
    console.log(count);



    // do-while：
    // 格式：初始条件 do{ 循环体和增量 }while(判断条件)
    // var i = 0;
    // while(i < 0) {
    //     console.log("打印第" + (i + 1) + "份试卷");
    //     i++;
    // }
    var i = 0;
    do{
        console.log("打印第" + (i + 1) + "份试卷");
        i++;
    }while(i < 0);

    // while和do-while
    // while：先判断，再执行（有可能循环体一次也不执行）
    // do-while：先执行，再判断（循环体至少会执行一次）
</script>

分支结构（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>分支结构switch</title>
</head>
<body>
    
</body>
</html>
<script>
    // 用法：
    // PS：switch小括号中一定要写上具体的值(有值的表达式也可)
    // PS：case在列举值的时候可以不按顺序排列
    // PS：多个case可以连写
    var week = 5;
    switch (week) {
        case 1:
            console.log("今天星期一");
            break;
        case 2:
            console.log("今天星期二");
            break;
        case 3:
            console.log("今天星期三");
            break;
        case 4: case 5: 
            console.log("今天星期四或者五");
            break;
        default:
            console.log("今天星期六或者日");
            break;
    }

    // switch和if的区别：
    // if：常用于判断条件是一个范围
    // switch：常用于判断具体的值且有限（最好是少量的）

    // 例：给你一个指定的年和月，求这个月有多少天？
    // 闰年：非世纪年能被4整除，世纪年能被400整除。29
    var year = prompt("请输入一个年份：")*1; 
    var month = prompt("请输入一个月份：")*1;
    var day = 0;
    switch (month) {
        case 1: case 3: case 5: case 7: case 8: case 10: case 12:
            day = 31;
            break;
        case 4: case 6: case 9: case 11:
            day = 30;
            break;
        case 2:
            if (year%400==0 || year%100!=0&&year%4==0) {
                day = 29;
            }else{
                day = 28;
            }
            break;
        default:
            break;
    }
    alert("这个月有：" + day + "天");
    console.log("这个月有：" + day + "天");
</script>

break 和 continue

<!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>break和continue</title>
</head>
<body>
    
</body>
</html>
<script>
    // break和continue常用在循环中（for和while）

    // for (var i = 0; i < 10; i++) {
    //     if (i == 5) {
    //         break;
    //     }
    //     console.log(i);
    // }
    // for(var i = 0; i < 10; i++){
    //     for(var j = 0; j < 10; j++){
    //         if (j == 2) {
    //             break;
    //         }
    //         console.log(j);
    //     }
    // }
    // 由以上两个示例：break：默认情况下只能中断当前循环；

    // 若想指定循环中断，需要给对应的循环起个名字，然后break对应的名字就行。
    /*
    a:
    for(var i = 0; i < 10; i++){
        b:
        for(var j = 0; j < 10; j++){
            if (j == 2) {
                break a;
            }
            console.log(j);
        }
    }
    */

    // for (var i = 0; i < 10; i++) {
    //     if (i == 5) {
    //         continue;
    //     }
    //     console.log(i);
    // }
    for(var i = 0; i < 10; i++){
        for(var j = 0; j < 10; j++){
            if (j == 2) {
                continue;
            }
            console.log(j);
        }
    }
    // continue：跳过本次循环，继续下一次循环；


</script>

常用的交互框

<!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>常用的交互框</title>
</head>
<body>
    
</body>
</html>
<script>
    // 警告框
    // alert("删除成功！");

    // 确认框
    // var res = confirm("您确定要删除次照片吗？");
    // if (res) {
    //     console.log("用户选择删除");
    // } else {
    //     console.log("用户选择不删除");
    // }

    // 输入框
    // PS：无论输入的什么内容，得到的是一个字符串
    var info = prompt("第3道题：请输入一个数子：","默认值");
    console.log(info);


    // // 作业：
    // var sum = 0;
    // for(var i = 0; i < 100; i++){
    //     sum += i;
    // }
    // alert("第一题：0-100内数字的和为："+sum);
    
</script>

拓展

<!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>拓展</title>
</head>
<body>
    
</body>
</html>
<script>
    // 移位运算：<< 左移位 >> 右移位
    // << 左移位
    // 8 => 00001000 << 2 => 00100000 => 2^5 = 32
    console.log(8 << 2);
    // >> 右移位
    // 8 => 00001000 >> 2 => 00000010 => 2
    console.log(8 >> 2);
    console.log(9 >> 2);

    // 与运算：&
    // 5&9 => 0101&1001 = 0001 = 0
    console.log(5 & 9);

    // 或运算：|
    // 5|9 => 0101|1001 = 1101 = 13
    console.log(5 | 9);

    // 异或运算：^
    // 特点：两边相同得到false，两边不同得到true
    // 5^9 => 0101^1001 = 1100 = 12
    console.log(5 ^ 9);


</script>