打印99乘法表

在学习打印乘法表之前，我们可以通过两个案例去理解它的实现原理。

一、打印一个矩形

let row = +prompt('请输入行数:')
let col = +prompt('请输入列数:')
// 1. 外层循环打印行数
// row等于几则输出几行
// 加上换行操作，三个笑脸会转换成垂直排列
for (let i = 1; i <= row; i++) {
    // 2. 里层循环打印n个笑脸
    // col等于几则输出几列，也就是每行输出几个笑脸
    for (let j = 1; j <= col; j++) {
	document.write('☺')
}
    // 3. 进行换行显示
    // 让外层循环打印的笑脸垂直排列
   document.write('<br>')
}

当 row = 3，col = 4 时，打印的结果如下：

二、打印一个直角三角形

与打印矩形唯一不同的是，打印直角三角形的方法中，里层循环的终止条件略有不同。

通过观察可以发现，直角三角形中，每一行的笑脸个数等于它所在的行数，例如：第一行有一个笑脸，第二行有两个笑脸…以此类推，所以，它的终止条件从小于等于输入的列数变为了小于等于行数。

let row = +prompt('请输入行数:')
// 1. 外层循环控制行数
for (let i = 1; i <= row; i++) {
// 2. 里层循环控制列数
	for (let j = 1; j <= i; j++) {
	   document.write('☺')
	}
// 3. 进行换行显示
   document.write('<br>')
}

当 row = 5 时，打印的结果如下：

原理：无论是打印矩形还是直角三角形，都是利用了for的循环嵌套：外层循环控制打印行，内层循环控制每行打印几列。

三、打印99乘法表

通过以上两个练习，我们就可以很轻松的打印出一个99乘法表，它和直角三角形的形状非常相似，所以可以利用打印直角三角形的方法来打印99乘法表。

// 1. 外层循环控制行数
for (let i = 1; i <= 9; i++) {
    // 2. 里层循环控制列数
    for (let j = 1; j <= i; j++) {
        // 输出对象的格式 
        document.write(`<span>${j} X ${i} = ${i * j}</span>`)
  }
    // 换行
    document.write('<br>')
}

打印的结果如下：