利用JavaScript，通过不同标签实现九九乘法表

最新推荐文章于 2021-06-28 10:16:54 发布

小苏(º﹃º )

最新推荐文章于 2021-06-28 10:16:54 发布

阅读量199

点赞数

分类专栏： Java 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45850095/article/details/112714487

版权

Java 专栏收录该内容

39 篇文章 3 订阅

订阅专栏

JavaScript实现九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            border: 1px solid red;/*边框厚度 实线 红色*/
        }
        div{
            border: 1px solid red;
            width: 100px; /*宽*/
            height: 20px; /*高*/
            float: left; /*向左浮动*/
        }
        span{
            border: 1px solid red;
            line-height: 40px;/*行内元素没有宽高，使用行高*/
        }
         ul li{
             border: 1px solid blue;
             margin: 2px;/*间距*/
             float: left;
         }
    </style>
<!--
1.页面输出
-->
    <script>
        document.write("<h3>1.table</h3>");
        document.write("<table>")
        for (var i =1; i <=9 ; i++) {
            document.write("<tr>")
            for (var j = 1; j <=i ; j++) {
                document.write("<td >"+i+" * "+j +" = "+(i*j)+"</td>")
            }
            document.write("</tr>");
        }
        document.write("</table>")
    </script>
<!--
2.控制台输出
-->
    <script>
        document.write("<h3>2.控制台输出,按F12</h3>");
       /* for (var i =1; i <=9 ; i++) {
            for (var j = 1; j <=i ; j++) {
                console.log(i+" * "+j +" = "+(i*j))
            }
        }*/
        let s=0;
        for (let i=1;i<=9;i++){
            for (let j=1;j<=i;j++){
                s=s+j+"*"+i +"="+(i*j)+"  ";
            }
            s+="\n"
        }
        console.log(s);

    </script>
    <!--
    3.div
    -->

    <script>
        document.write("<h3>3.div</h3>");
        for (var i =1; i <=9 ; i++) {
            for (var j = 1; j <=i ; j++) {
                document.write("<div>"+i+" * "+j +" = "+(i*j)+"</div>")
            }
            document.write("<br>")
            document.write("<br>")

        }

    </script>
    <!--4.span-->
    <script>
        document.write("<h3>4.span</h3>");
        for (var i =1; i <=9 ; i++) {
            document.write("<div style='text-align: center;width: 100%;height: 40px;border: none'>")
            for (var j = 1; j <=i ; j++) {
                document.write("<span>"+i+" * "+j +" = "+(i*j)+"</span>&emsp;")
            }
            document.write("</div>")
        }
        for (var i =1; i <=9 ; i++) {
            for (var j = 1; j <=i ; j++) {
                document.write("<span>"+j+" * "+i +" = "+(i*j)+"</span>&emsp;")
            }
            document.write("<br>")
        }
    </script>
    <!--5.ul li -->

    <script>
        document.write("<h3>5.ul li </h3>");
        for (let i =1; i <=9 ; i++) {
            document.write("<ul style='list-style: none'>")//style='list-style: none'去除无序的黑点
            for (var j = 1; j <=i ; j++) {
                document.write("<li>"+i+" * "+j +" = "+(i*j)+"</li>")
            }
            document.write("<br></ul>")
        }

    </script>
</head>
<body>

</body>
</html>

运行结果：
在这里插入图片描述
2.控制台输出：

4.sapn输出

小苏(º﹃º )

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
利用JavaScript，通过不同标签实现九九乘法表

JavaScript实现九九乘法表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> td{ border: 1px solid red;/*边框厚度实线红色*/ } div{
复制链接

扫一扫