Java Script 经典案例九九乘法口诀表的打印

趋之

已于 2023-11-20 15:59:40 修改

阅读量85

点赞数

分类专栏：案例文章标签： html5 css 前端

于 2023-11-07 21:03:19 首次发布

本文链接：https://blog.csdn.net/csgojingyu/article/details/134276105

版权

案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现思路

九九乘法口诀表分为横向打印和纵向打印，，那么就需要用到双重for循环嵌套，外层循环的作用是当这一层横向打印完毕继续打印下一行，内层循环实现横向打印。

下面来看看Javascript部分的代码

 
        let i    // 纵向循环变量
        let j    // 横向循环变量
        document.write('<table>') // 开始表格的HTML代码
        for (i = 1; i <= 9; i++) {  // 纵向循环，从1循环到9
            document.write('<tr>') // 开始表格行的HTML代码
            for (j = 1;j <=i ; j++) {  // 横向循环，从1循环到i
                document.write('<td>') // 开始单元格的HTML代码
                document.write(`${i}X${j}=${i*j}&nbsp`) // 在单元格中输出乘法口诀表
                document.write('</td>') //结束单元格的HTML代码
            }
            document.write('</tr>') //结束表格行的HTML代码
        }
        document.write('</table>') //结束表格的HTML代码

其中要注意的点是内层循环，内层循环（横向循环）的变量 j 一定要小于等于纵向循环 i ，因为横向的打印数是和纵向的层数是相等的，所以 j 是的值是不能超过 i 的

for (j = 1;j <=i ; j++) {  // 横向循环，从1循环到i
 
                document.write('<td>') // 开始单元格的HTML代码
 
                document.write(`${i}X${j}=${i*j}&nbsp`) // 在单元格中输出乘法口诀表
 
                document.write('</td>') //结束单元格的HTML代码
 
            }

我比较推荐使用lable表格来包裹乘法口诀表，最为简单和简洁。最后添加css样式即可，下面附上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印九九乘法口诀表</title>
    <style>
        /* 全局重置样式 */
        *{
            margin: 0;
            padding: 0;
        }
        
        /* 表格单元格样式 */
        td{
            width: 80px;
            background-color: pink;
            text-align: center;
            border-radius: 5px;
            border: 2px solid rgb(255, 137, 157);
            color: rgb(225, 0, 255);
        }
    </style>
</head>
<body>
    <script>
        let i    // 纵向循环变量
        let j    // 横向循环变量
        document.write('<table>') // 开始表格的HTML代码
        for (i = 1; i <= 9; i++) {  // 纵向循环，从1循环到9
            document.write('<tr>') // 开始表格行的HTML代码
            for (j = 1;j <=i ; j++) {  // 横向循环，从1循环到i
                document.write('<td>') // 开始单元格的HTML代码
                document.write(`${i}X${j}=${i*j}&nbsp`) // 在单元格中输出乘法口诀表
                document.write('</td>') //结束单元格的HTML代码
            }
            document.write('</tr>') //结束表格行的HTML代码
        }
        document.write('</table>') //结束表格的HTML代码
    </script>
</body>
</html>

趋之

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Java Script 经典案例九九乘法口诀表的打印

其中要注意的点是内层循环，内层循环（横向循环）的变量 j 一定要小于等于纵向循环 i ，因为横向的打印数是和纵向的层数是相等的，所以 j 是的值是不能超过 i 的。表分为横向打印和纵向打印，，那么就需要用到双重for循环嵌套，外层循环的作用是当这一层横向打印完毕继续打印下一行，内层循环实现横向打印。表格来包裹乘法口诀表，最为简单和简洁。最后添加css样式即可，下面附上完整代码。下面来看看Javascript部分的代码。
复制链接

扫一扫