javaScript | 练习：写一个九九乘法表

最新推荐文章于 2025-04-30 15:58:09 发布

一只漫漫

最新推荐文章于 2025-04-30 15:58:09 发布

阅读量1.2k

点赞数 25

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/ZM20170703/article/details/136530228

版权

浏览器运行结果如下：

参考代码如下：

<!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>，从而实现每行的分隔。