浏览器运行结果如下:
参考代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打印九九乘法表</title>
<style>
span {
display: inline-block;
/* 行内块元素 可设置大小 默认由内容撑开 */
padding: 10px 5px;
/* 设置上下 左右内边距 */
margin-bottom: 10px;
border: 2px solid rgb(209, 235, 89);
border-radius: 5px;
/* 设置圆角边框 */
background-color: rgb(226, 193, 218);
}
</style>
</head>
<body>
<script>
// 打印九九乘法表
/* for (let i = 1; i <= 9; i++) {// 九行
// let sum = i * j 模板字符串里可以直接计算
for (let j = 1; j <= i; j++) {//实现第几行打印几列
document.write(`${j} * ${i} = ${i*j} `)
}
document.write('<br>') //每行输出后换行显示
}
*/
// 升级美化一下
for (let i = 1; i <= 9; i++) {// 控制打印的行数为九行
for (let j = 1; j <= i; j++) {//实现第几行打印几列
document.write(`<span> ${j} * ${i} = ${i * j} </span> `)//实现计算并输入
}//加span标签用来进行美化 再对span进行设置样式
document.write('<br>') //每行输出后换行显示
}
</script>
</body>
</html>
考查知识点:包括循环结构、条件判断、以及字符串的格式化输出
代码解读:
-
外层循环(
for (let i = 1; i <= 9; i++)
):- 这是一个从1循环到9的for循环,用来遍历乘法表的每一行。
i
变量代表当前行号,同时它也是内层循环的初始值,因为内层循环的次数取决于当前行号。
-
内层循环(
for (let j = 1; j <= i; j++)
):- 这是一个嵌套在外层循环内部的for循环,用于打印每一行中的每个乘法算式。
j
变量代表当前列号,其循环次数由外层循环的变量i
决定,即j
从1循环到i
。
-
乘法算式的生成与输出(
document.write(
${i} * ${j} = ${i * j})
):- 在每次内层循环的迭代中,使用模板字符串(反引号
`
)来格式化并拼接乘法算式。 ${i}
和${j}
是模板字符串中的表达式占位符,它们会被替换为当前的行号和列号。${i * j}
是计算当前行号和列号相乘的结果,并将其转换为字符串插入到乘法算式中。document.write
函数用来将生成的乘法算式输出到网页中。
- 在每次内层循环的迭代中,使用模板字符串(反引号
-
换行处理(
document.write('<br>')
):- 在每一行的内层循环结束后,使用
document.write('<br>')
来输出一个HTML换行标签<br>
,从而实现每行的分隔。
- 在每一行的内层循环结束后,使用