规律:

• 在循环嵌套中, 外循环控制的是行数, 内循环控制的是列数

练习

• for循环嵌套实现:矩形绘制

  需求: 在界面上绘制如下图形
  ****
  ****
  ****
  

   //  外循环控制行数
   for (var i = 0; i < 3; i++) {
         //     内循环控制列数
         for (var j = 0; j < 4; j++){
             window.document.write("*");
         }
         window.document.write("<br/>");
   }
  

• 尖尖朝上，改变内循环的条件表达式，让内循环的条件表达式随着外循环的 i 值变化

  需求: 在界面上绘制如下图形
  *
  **
  ***
  ****
  *****
  

    for(var i = 0; i< 5; i++){
        for(var j = 0; j <= i; j++){
              window.document.write("*\t");
        }
        window.document.write("<br/>");
    }
  

• 尖尖朝下，改变内循环的初始化表达式，让内循环的初始化表达式随着外循环的 i 值变化

  需求: 在界面上绘制如下图形
  *****
  ****
  ***
  **
  *
  

  for(var i = 0; i< 5; i++){
      for(var j = i; j < 5; j++){
          window.document.write("*\t");
      }
      window.document.write("<br/>");
  }
  

for循环嵌套实现:打印特殊三角形

1
12
123

  /*
  1.观察发现有很多行很多列--》循环嵌套
  2.尖尖朝上，让内循环条件表达式随着外循环i改变
  3.发现每次输出的值其实就是 j + 1 的值
  */
  for (var i = 0; i < 3; i++) {
      for (var j = 0; j <= i; j++) {
          window.document.write(j+1+"");
      }
      window.document.write("<br/>");
  }

1
22
333

  /*
  1.观察发现有很多行很多列--》循环嵌套
  2.尖尖朝上，让内循环条件表达式随着外循环i改变
  3.发现每次输出的值其实就是i的值
  */
    for (var i = 1; i <= 3; i++) {
        for (var j = 1; j <= i; j++) {
            window.document.write(i + "");
        }
        window.document.write("<br/>");
    }

for循环嵌套实现:打印正三角形

-----*
----***
---*****
--*******
-*********
***********

  /*
  1.观察发现有很多行很多列--》循环嵌套
  2.仔细观察其实需要打印2个三角形, 一个尖尖朝上,一个尖尖朝下
  切记先一个一个打印, 然后再合并,否则步子迈大了会扯到蛋
  */
    for (var i = 0; i <= 5; i++) {
        for (var j = 0; j < 5 - i; j++) {
            window.document.write("-");
        }
        for (var m = 0; m < 2*i+1; m++) {
            window.document.write("*");
        }
        window.document.write("<br/>");
    }

for循环嵌套实现:打印99乘法表

1 * 1 = 1
1 * 2 = 2     2 * 2 = 4
1 * 3 = 3     2 * 3 = 6     3 * 3 = 9

<style>

    span{
        display: inline-block;
        border: 1px solid #000;
        padding: 10px;
    }
</style>
<script>
    /*
      1.观察发现有很多行很多列--》循环嵌套
      2.尖尖朝上，让内循环条件表达式随着外循环i改变
      3.输出的结果等于 内循环的变量 * 外循环的变量
    */
    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
        }
        window.document.write("<br/>");
    }
</script>