html js css实现九九乘法表

最新推荐文章于 2023-12-29 11:49:36 发布

斷了De弦

最新推荐文章于 2023-12-29 11:49:36 发布

阅读量3.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端面试 html css javascript

本文链接：https://blog.youkuaiyun.com/w3624270/article/details/82662531

前端面试同时被 3 个专栏收录

53 篇文章

订阅专栏

javascript

20 篇文章

订阅专栏

css

15 篇文章

订阅专栏

本文介绍了一个简单的网页布局案例，使用HTML、CSS和JavaScript实现动态生成的乘法表，通过循环创建行和列，并填充相应的乘法运算结果。

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

效果图：

HTML：

<body>
<div id="main">
</div>
</body>

CSS：

.row{
    text-align: center;
    width: 800px;
    margin: 0 auto;
}
.col{
    border:  1px solid #000000;
    display: inline-block;
    width: 60px;
    height: 20px;
}

JS：

let main=document.getElementById('main');
for(let i=1;i<=9;i++){
    let row=document.createElement('div');
    row.className='row';
    main.appendChild(row);
    for(let j=1;j<=i;j++){
        let col=document.createElement('div');
        col.className='col';
        let content='<span>'+i+'*'+j+'='+i*j+'</span>';
        row.appendChild(col);
        col.innerHTML=content;
    }
}