用wihle实现一个乘法表

最新推荐文章于 2025-02-03 21:25:07 发布

流灬

最新推荐文章于 2025-02-03 21:25:07 发布

阅读量151

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_41625074/article/details/104980271

版权

笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成九九乘法表的方法，通过内外循环和字符串拼接，将乘法表以HTML表格形式展示在网页上。这种方法不仅能够清晰地展现乘法表，还提供了对网页布局的灵活控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
        height:100px;
        background:red;
        }
        td{
            border:1px solid green;
            padding:0 10px;
        }
    </style>
</head>
<body>
    <h1></h1>
    <script>
        // 定义临时变量，为行计数，初始值为一，便于乘法表的计算
        var j=1;
        // 定义列、行
        var col=9;
        var row=9;
        // 定义用于添加进主体的字符串首，赋值为表格的前半部分
        var str="<table>";
        // 开始外循环，这里循环跳出的条件表示从第一行循环到第九行
        while(j<=row){
            // 内循环开始前添加行标签的前半部分
            str+="<tr>";
            // 定义临时变量，记录第几列，初始值为1，便于乘法表的计算
            var i=1;
            // 开始内循环，每趟添加一个单元格，这里注意循环结束的条件是什么，意思是轮到第几行就有第几列，符合乘法表
            while(i<=j){
                str+="<td>"+j+"*"+i+"="+j*i+"</td>";
                i++;
            }
            // 内循环全部结束，添加行标签的后半部分，结束一行
            str+="</tr>";
            j++;
        }
        // 所有行添加结束，添加表格后半部分结束
        str+="</table>"
        // 把字符串添加在主体内容的后面  这与直接写document.body.innerHTML=str;有区别，直接写是替换该对象里的所有内容
        document.body.innerHTML+=str;
    </script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
        height:100px;
        background:red;
        }
        td{
            border:1px solid green;
            padding:0 10px;
        }
    </style>
</head>
<body>
    <h1></h1>
    <script>
        // 定义临时变量，为行计数，初始值为一，便于乘法表的计算
        var j=1;
        // 定义列、行
        var col=9;
        var row=9;
        // 定义用于添加进主体的字符串首，赋值为表格的前半部分
        var str="<table>";
        // 开始外循环，这里循环跳出的条件表示从第一行循环到第九行
        while(j<=row){
            // 内循环开始前添加行标签的前半部分
            str+="<tr>";
            // 定义临时变量，记录第几列，初始值为1，便于乘法表的计算
            var i=1;
            // 开始内循环，每趟添加一个单元格，这里注意循环结束的条件是什么，意思是轮到第几行就有第几列，符合乘法表
            while(i<=j){
                str+="<td>"+j+"*"+i+"="+j*i+"</td>";
                i++;
            }
            // 内循环全部结束，添加行标签的后半部分，结束一行
            str+="</tr>";
            j++;
        }
        // 所有行添加结束，添加表格后半部分结束
        str+="</table>"
        // 把字符串添加在主体内容的后面  这与直接写document.body.innerHTML=str;有区别，直接写是替换该对象里的所有内容
        document.body.innerHTML+=str;
    </script>
</body>
</html>