五、多重循环

在二重循环中,外层循环变量变化一次,内层循环变量变化整个

<!DOCTYPE html>
<html>
<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>二重循环</title>
</head>
<body>
    <script>
        // 什么是二重循环?循环里面嵌套循环
        // 在二重循环中,外层循环变量变化一次,内层循环变量变化整个
        for(let i=1;i<=3;i++){
            console.log('i='+i);
            //i为1时,j从1变化到3
            //i为2时,j从1变化到3
            //i为3时,j从1变化到3
            for(let j=1;j<=3;j++){
                console.log('j='+j);
            }
        }
        console.log('------------------------------------------');
        // 有三个班级,每个班级有3名学员,输入每个班级每个学员的考试成绩,并计算出每个班级的平均分
        
        //第一层循环,循环所有的班级
        for(let i=1;i<=3;i++){
            let sum = 0   //定义每个班级的总分
            alert(`请输入第${i}个班级的学生成绩`)
            //第二层循环,循环每个班级的所有学生
            for(let j=1;j<=3;j++){
                //将每一名学员的成绩,累加给班级总分
                sum += parseInt(prompt(`请输入第${i}个班级的第${j}名学员成绩:`))
            }
            //计算每个班级的平均分
            let avg = sum / 3
            alert(`第${i}个班级的平均分是${avg}`)
        }
    </script>
</body>
</html>

弹窗显示为(仅显示第一个班级):

 

 

 

练习题

1.有三个班级,每个班级有四名学生,输入所有学生的成绩,并计算出每个班级的平均分

<!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>二重循环练习1</title>
</head>

<body>
    <script>
        // 有三个班级,每个班级有四名学生,输入所有学生的成绩,并计算出每个班级的平均分
        // 并统计出每个班级里面的最高分和最低分
        //第一层循环,循环所有的班级
        for (let i = 1; i <= 3; i++) {
            let sum = 0   //定义每个班级的总分
            let max = 0   //定义每个班级的最高分
            let min = 100   //定义每个班级的最低分
            alert(`请输入第${i}个班级的学生成绩`)
            //第二层循环,循环每个班级的所有学生
            for (let j = 1; j <= 4; j++) {
                //将每一名学员的成绩,累加给班级总分
                let score = parseInt(prompt(`请输入第${i}个班级的第${j}名学员成绩:`))
                // 判断该学员的成绩是否是最高分
                if(max<score){
                    max = score  //重新获取最高分
                }
                // 判断该学员的成绩是否是最低分
                if(min>score){
                    min = score  //重新获取最低分
                }
                sum += score
            }
            // //计算每个班级的平均分
            let avg = sum / 4
            alert(`第${i}个班级的平均分是${avg},班级最高分是${max},最低分是${min}`)
        }
    </script>
</body>

</html>

弹窗显示为(仅显示第一个班级):

 

 

 

 

2.(1)打印直角三角形

   (2)打印倒直角三角形

   (3)打印等腰三角形

   (4)打印倒等腰三角形

<!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>二重循环练习2</title>
</head>

<body>
    <script>
        // 打印直角三角形
        /* 
            #
            ##
            ###
            ####
            #####
        */
        console.log('----------------直角(1 2 3 4 5)------------------');
        // 外层循环控制行数    
        for (let i = 1; i <= 5; i++) {
            let str = ""
            // 内层循环控制每行的列数(每行的列数===行号)
            for (let j = 1; j <=i; j++) {
                str += '#'
            }
            console.log(str);
        }
        console.log('----------------直角(1 3 5 7 9)------------------');
        /* 
            #
            ###
            #####
            #######
            #########
        */
        // 外层循环控制行数    
        for (let i = 1; i <= 5; i++) {
            let str = ""
            // 内层循环控制每行的列数(每行的列数===行号*2-1)
            for (let j = 1; j <=i*2-1; j++) {
                str += '#'
            }
            console.log(str);
        }
        console.log('----------------倒直角(5 4 3 2 1)------------------');
        /* 
            #####
            ####
            ###
            ##
            #
        */
        // 外层循环控制行数    
        for (i=1;i<=5;i++) {
            let str = ""
            // 内层循环控制每行的列数
            for (let j = 6-i; j > 0; j--) {
                str += '#'
            }
            console.log(str);
        }
        console.log('-----------------等腰-----------------');
        /* 
            @@@@
            @@@
            @@
            @
            #
            ###
            #####
            #######
            #########

            @@@@#
            @@@###
            @@#####
            @#######
            #########
        */
        // 外层循环控制行数    
        for (let i = 1; i <= 5; i++) {
            let str = ""
            // 内层第一个for,用于补充空格
            for (let j = 5-i; j > 0; j--) {
                str += ' '
            }
            // 内层第二个for,用于打印字符
            for (let j = 1; j <=i*2-1; j++) {
                str += '#'
            }
            console.log(str);
        }
        console.log('-----------------倒等腰-----------------');
        /* 
            #########
            @#######
            @@#####
            @@@###
            @@@@#
        */
        // 外层循环控制行数    
        for (let i = 5; i >=1; i--) {
            let str = ""
            // 内层第一个for,用于补充空格
            for (let j = 5-i; j > 0; j--) {
                str += ' '
            }
            // 内层第二个for,用于打印字符
            for (let j = 1; j <=i*2-1; j++) {
                str += '#'
            }
            console.log(str);
        }
    </script>
</body>

</html>

控制台显示:

3.打印空心的等腰三角形

<!DOCTYPE html>
<html>

<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>二重循环练习3</title>
</head>

<body>
    <script>
        // 打印空心的等腰三角形
        /* 
            @@@@#
            @@@# #
            @@#   #
            @#     #
            #########
        */
        // 外层循环,用于循环行数    
        for (let i = 1; i <= 5; i++) {
            let str = ""
            // 该循环,用于控制每行前面的空格
            for (let j = 5 - i; j >= 1; j--) {
                str += " "
            }
            // 内层循环,控制每行的列数
            for (let j = 1; j <= i * 2 - 1; j++) {
                //每行第一列和最后一列打印#号,其他地方打印空格
                //或是第五行,打印全部#号
                if (j === 1 || j === i * 2 - 1 || i === 5) {
                    str += "#"
                } else {
                    str += " "
                }
            }
            console.log(str);
        }
    </script>
</body>

</html>

控制台显示:

4.打印99乘法表

<!DOCTYPE html>
<html>
<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>二重循环练习4</title>
</head>
<body>
    <script>
        // 打印99乘法表
        /* 
            1*1=1
            1*2=2 2*2=4
            1*3=3 2*3=6 3*3=9
            ......
        */
        // 整体的形状是:直角三角形    
        for(let i=1;i<=9;i++){
            let str = ""
            for(let j=1;j<=i;j++){
                str+=j+"X"+i+'='+(j*i)+'\t'
            }
            console.log(str);
        }
    </script>
</body>
</html>

控制台显示:

5.数字等腰三角形

<!DOCTYPE html>
<html>

<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>二重循环练习5</title>
</head>

<body>
    <script>
        // 数字等腰三角形
        /* 
                1
               121
              12321
             1234321
            123454321

            第一部分:
            @@@@
            @@@
            @@
            @

            第二部分:
            1
            12
            123
            1234
            12345
            第三部分

            1
            21
            321
            4321
        */
        //外层循环,控制行数
        for (let i = 1; i <= 5; i++) {
            // 内层循环控制每行打印内容
            let str = ""
            // 1.打印左边的空格
            for(let j=1;j<=5-i;j++){
                str += "@"                
            }
            // 2.打印三角形的左侧
            for(let j=1;j<=i;j++){
                str+=j
            }
            // 3.打印三角形的右侧
            for(let j=i-1;j>=1;j--){
                str+=j
            }
            console.log(str);
        }
    </script>
</body>

</html>

控制台显示:

6.找出100以内所有的质数

<!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>二重循环练习6</title>
</head>
<body>
    <script>
        // 找出100以内所有的质数
        // 什么是质数?只能被1 和 自身整除的数 是质数

        // 第一层循环确定查找的范围
        for(let i=2;i<=100;i++){
           // 定义一个count,用于记录被整除的次数
           let count = 0
            // 第二层循环,确定每次比较的范围
            for(let j=1;j<=i;j++){
                // 假设i是25,j从1到25
                if(i%j===0){
                    count++
                }
            }
            //如果,只有两个数能被i整除,那么i就是质数
            if(count===2){
                console.log(i);
            }
        }
    </script>
</body>
</html>

控制台显示:

在内层循环中,使用continue,break,只是作用于内层循环

<!DOCTYPE html>
<html>
<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>在内层循环中,使用continue,break</title>
</head>
<body>
    <script>
        /* 
            有5家店,每家店最多可以买3件衣服,进入一家店后,提示是否离开本店,
            输入y表示离开(会进入下一家店),输入n表示买一件衣服,最后输出用户一共买了多少件衣服。
        */
        let count = 0   //定义count,保存购买衣服的总数量
        //外层循环,控制有多少家店
        for(let i=1;i<=5;i++){
            alert('欢迎光临第'+i+'家店')
            //内层循环,控制每家店,可以买多少件衣服
            for(let j=1;j<=3;j++){
                let isLeave = prompt('是否离开(y/n):')
                if(isLeave==='n'){
                    alert('成功购买了一件衣服')
                    count++
                    // 内层循环里面的continue,只是对内层循环起作用
                    continue
                }
                //内层循环里面的break,只是对内层循环起作用
                break;  
            }
        }
        alert('您一共购买了'+count+'件衣服')
    </script>
</body>
</html>

弹窗显示为:

 

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值