练习 JavaScript 的嵌套循环实现 9*9乘法表

在制作表格之前我们需要找到表格的规律：

1.首先9*9 乘法表是由9行9列的单元格组成；
2.其次：乘法表的层数 = 表格的行数 = 每行的列数。

分析完布局规律后，我们在找 运算规律：
1.其中被乘数的取值范围 ‘1~ 每行中的列数’之间；
2.乘数的值是表格的行数；

下面根据分析用代码实现：

<script>
        for(var i=1;i < 10; i++){
            for(var j=1; j<=i; j++){
                document.write('<apan>'+j+ '*' + i + '=' + (i*j)='</span>')
                document.write("&nbsp&nbsp&nbsp")
            }
            document.write("<br/><br/>")
        }
    </script>

for(var i=1;i < 10; i++)

第一层循环，带边乘法表的行数，一共九行，所以 i 小于10。切每次循环加一。

for(var j=1; j<=i; j++)

第二层循环，因为行数等于列数，所以让 j 小于等于 i。切每次循环加一。

document.write(j+ ‘*’ + i + ‘=’ + (i * j))

使用document节点直接将想要输出的效果输出到web页面中。

document.write("

")
换行，每次循环都换一行，就能实现乘法表的梯形降落样式。

下面来看看实现效果：

当然在后期我们也可以使用css为页面设置样式，例如为了让每行看起来更整齐，我们可以使用宽度来调节：

<style>
        span{
            display: inline-block;
            width: 50px;
        }
    </style>

或者是设置更好看的颜色，增加视觉感觉。

总结：
1.我们使用了“嵌套循环”’，来实现行与列的关系。
2.使用document.write() 输出语句，想web页面添加标签。
3.我们可以利用js直接向 html 中添加标签。