使用循环打印三角型以及九九乘法表

一、循环打印三角形

1、需求分析：需要用到双层for循环来实现；外层循环实现行数，内层循环实现每行的个数；外层每循环一次，就换一次行；内层循环打印的个数与外层循环的行数是相对应的。由于内层循环的个数和外层循环的行数一样，所以内部循环的判断条件 j < i。

2、演示：

for(let i = 1; i <= 5; i++){
            for(let j = 0; j< i; j++){
                document.write('★')
            }
            document.write('<br>')
        }

实现效果：

 

二、循环打印九九乘法表

1、九九乘法表的外形与上面案例三角形的打印一样，都是利用循环嵌套，只不过行数和每行的列数不一样，在此就不做分析了，直接上代码。

2、代码演示

style样式部分

<style>
        span{
            display: inline-block;
            padding:4px ;
            margin: 4px;
            border: 1px solid pink;
            border-radius: 3px;
            border-shadow: 2px 2px 2px rgb(251, 187, 198, .3);
        }
    </style>

script部分

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

实现效果：

结束语：此案例的难点应该在于内部循环的判断条件等于外部循环的值（案例中的 j < i），对于案例分析多加思考，找出其中的规律，就会容易很多。