JavaScript输出乘法口诀表

shan33__

于 2024-02-02 15:57:43 发布

阅读量461

点赞数 12

分类专栏：经典例题文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/shan33__/article/details/135995571

版权

经典例题专栏收录该内容

41 篇文章 1 订阅

订阅专栏

本文详细描述了如何在HTML中创建一个div用于显示乘法口诀，并利用JavaScript编写代码实现乘法表的动态生成，最后将结果显示在页面的指定位置。

摘要由CSDN通过智能技术生成

问题：用JavaScript编写一个乘法口诀表，然后输出在页面的指定位置。

1.在html部分写一个将要用来存放乘法口诀表的盒子。

    <div id="box">

    </div>

2.设置一下盒子的样式。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            /* border: 1px solid #222; */
            border-collapse: collapse;
            margin: 10px auto;
        }

        td {
            border: 1px solid #222;
            padding: 20px;
        }

        #box {
            width: 1000px;
            height: 1000px;
            border: 1px solid red;
            margin: 100px;
        }
    </style>

3.编写js部分的关键代码。

 <script>
        // 九九乘法口诀表

        let str = '<table>'
        //外层循环控制行数
        for (let i = 1; i <= 9; i++) {
            str += '<tr>'
            //内层循环控制td的个数
            for (let j = 1; j <= i; j++) {
                str += `<td>
                           ${j}x${i}=${j*i}
                        
                        
                        </td>`
            }
            str += '</tr>'
        }
        str += '</table>'
        // console.log(str);
        document.write(str);
        document.querySelector('#box').innerHTML = str;
    </script>