CSS+JavaScript 制作九九乘法表 + 附代码

Vip__Miracle

于 2021-12-20 20:35:01 发布

阅读量1.3k

点赞数

分类专栏： Web前端 Java前端前端Web 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_51675604/article/details/122049724

版权

Web前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

Java前端

5 篇文章 0 订阅

订阅专栏

前端Web

4 篇文章 0 订阅

订阅专栏

样式

页面显示效果如下：

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        /*
             CSS部分
         */
        td
        {
            border: 1px solid;  //带有边框大小1px，实线
        }
    </style>

    <script>
        /*
            JavaScript部分
        */
        document.write("<table  align='center'>");  //画一个表格，放在中间，但是没有边框
        for (var i = 1; i <=9 ; i++)
        {
            for (var j = 1; j <= i; j++)
            {
                document.write("<td>"); //大表格中套小表格，这个小表格是用CSS修饰的
                //输出1*1=2
                document.write(i + "*" + j + "=" + (i*j) + "&nbsp&nbsp&nbsp");
                document.write("</td>");
            }
            //输出换行
            // document.write("<br>");
            document.write("</tr>")
        }
        //2.完成表格嵌套
        document.write("</table>");
    </script>
</head>
<body>

</body>
</html>

Vip__Miracle

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS+JavaScript 制作九九乘法表 + 附代码

目录样式代码样式页面显示效果如下：代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>九九乘法表</title> <style> /* CSS部分 */ td { border: 1px
复制链接

扫一扫