标签：案例 write 嵌套 循环 var document 页面

循环嵌套案例

循环嵌套

​ （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;
    }

标签：案例,write,嵌套,循环,var,document,页面
来源： https://blog.csdn.net/weixin_48190576/article/details/123121524

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。