循环嵌套案例

循环嵌套

​ （1）在一个循环内再次书写一个循环

​ （2） 注意: 里外层循环不要使用一个变量控制

案例1

使用 * 在页面出现一个 9 * 9 的正方形

// 1. 在页面输出一个 *
     document.write('*')

    // 2. 在页面输出一行 *
    for (var i = 1; i <= 9; i++) {
       document.write('* ')
     }
     document.write('<br>')

    // 3. 在页面输出 9 行 *
    // 步骤2 重复九次
     for (var j = 1; j <= 9; j++) {
       for (var i = 1; i <= 9; i++) {
         document.write('* ')
      }
       document.write('<br>')
     }

案例2

使用 * 在页面上出现以下三角形

* *

* * *

* * * *

* * * * *

* * * * * *

* * * * * * *

* * * * * * * *

* * * * * * * * *

规律:

​ 第 1 行 1个

​ 第 2 行 2个

​ 第 3 行 3个

​ …

​ 第 9 行 9个

    // outer 循环控制多少行, 不能动
     outer:
     for (var i = 1; i <= 9; i++) {

    //   // inner 决定每一行多少个
    //   // 当 i === 1 的时候  第 1 行,  inner 循环应该循环 1 次    j = 1; j <= 1   1次
    //   // 当 i === 2 的时候  第 2 行,  inner 循环应该循环 2 次    j = 1; j <= 2   2次
    //   // 当 i === 3 的时候  第 3 行,  inner 循环应该循环 3 次    j = 1; j <= 3   3次
    //   // ...
    //   // 当 i === 9 的时候  第 9 行,  inner 循环应该循环 9 次    j = 1; j <= 9   9次
       inner:
       for (var j = 1; j <= i; j ++) {
         document.write('* ')
       }
       document.write('<br>')
     }

案例3

使用 * 出现以下三角形

* * * * * * * * *

* * * * * * * *

* * * * * * *

* * * * * *

* * * * *

* * * *

* * *

* *

 for (var i = 1; i <= 9; i++) {

    //   // 当 i === 1 的时候, 第 1 行, inner 循环应该是 9 次   j = 1; j <= 9   9次
    //   // 当 i === 2 的时候, 第 2 行, inner 循环应该是 8 次   j = 2; j <= 9   8次
    //   // 当 i === 3 的时候, 第 3 行, inner 循环应该是 7 次   j = 3; j <= 9   7次
    //   // 当 i === 9 的时候, 第 9 行, inner 循环应该是 1 次   j = 9; j <= 9   1次
       for (var j = i; j <= 9; j++) {
        document.write('* ')
       }
       document.write('<br>')
    }

案例4

九九乘法表

for (var i = 1; i <= 9; i++) {
      for (var j = 1; j <= i; j++) {
        document.write('<span>' + j + ' * ' + i + ' = ' + (i*j) + ' </span>')
      }
      document.write('<br>')
    }

span {
      display: inline-block;
      width: 120px;
      height: 30px;
      text-align: left;
    }