利用div、span、ul分别来实现99乘法表

最新推荐文章于 2022-12-27 16:50:22 发布

流年丿往昔

最新推荐文章于 2022-12-27 16:50:22 发布

阅读量546

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/StruggleBamboo/article/details/112694152

版权

99乘法表

一、代码
- 1.99乘法表不同方法的代码
总结

一、代码

1.99乘法表不同方法的代码


<!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;/*行内元素没有宽高，使用行高*/
        }
    </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.控制台输出</h3>");
        for (var i =1; i <=9 ; i++) {
            for (var j = 1; j <=i ; j++) {
                console.log(i+" * "+j +" = "+(i*j))
            }
        }
    </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>")
        }

    </script>
    <!--5.ul li -->

    <script>
        document.write("<h3>5.ul li </h3>");
        for (var i =1; i <=9 ; i++) {
            document.write("<ul style='list-style: none'>")
            for (var j = 1; j <=i ; j++) {
                document.write("<li>"+i+" * "+j +" = "+(i*j)+"</li>&emsp;")
            }
            document.write("</ul>")
        }

    </script>
</head>
<body>
<style>

    ul li{
        border: 1px solid blue;
        float: left;
    }
</style>
</body>
</html>