JS打印三角形，平行四边形和九九乘法表

美丽花裤衩

已于 2022-09-25 19:51:20 修改

阅读量252

点赞数 1

分类专栏： Html+Css 文章标签： javascript 前端 html

于 2022-09-25 19:33:08 首次发布

本文链接：https://blog.csdn.net/qq_31368197/article/details/127041701

版权

Html+Css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS打印三角形，平行四边形和九九乘法表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        table{
            border: 1px solid #000;
            margin: 100px auto;
            background: #fbfbfb;
        }
        td{
            box-sizing: border-box;
            border-top: 1px solid #000;
            border-right: 1px solid #000;
            padding: 10px 20px;
            width: 80px;
        }
        tbody tr:nth-child(1) td{
            border-top: none;
        }
        tbody tr:last-child td:last-child{
            border-right: none;
        }
        th{
            height: 50px;
            border-bottom: 1px solid #000;
        }
        .Tri-box{
            padding-left: 100px;
        }
    </style>

    <table cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th colspan="9">九九乘法表</th>
            </tr>
        </thead>
        <script>
            for(var i = 1 ; i <= 9 ; i++){
                document.write('<tr>');
                for(var j = 1 ; j <= i ; j++){
                    pro = j + '*' + i + '=' + i * j;
                    document.write('<td>');
                    document.write(pro);
                    document.write('</td>');
                }
                document.write('</tr>');
            }
        </script>
    </table>

    


    <script>
        document.write('<div class="Tri-box">');
        for(var i = 1; i <= 5; i++){
            for(var a = 1; a <= 5-i; a++){
                document.write('&nbsp;');        //每行星号前面的空格
            }
            for(var b = 1; b <= i; b++){
                document.write('*' + '&nbsp;');     //每行星号的数量
            }
            document.write('<br>');
        }
        document.write('</div>');
        document.write('=======================aaa============================');
    </script>

     <script>
        document.write('<div class="Tri-box">');
        for(var i = 1; i <= 5; i++){
            // for(var a = 1; a <= 5-i; a++){
            //     document.write('&nbsp;');        //每行星号前面的空格
            // }
            for(var b = 1; b <= i; b++){
                document.write('*' + '&nbsp;');     //每行星号的数量
            }
            document.write('<br>');
        }
        document.write('</div>');
        document.write('========================bbb===========================');
    </script>
    <script>
        document.write('<div class="Tri-box">');
        for(var i = 1; i <= 5; i++){
            // for(var a = 1; a <= 5-i; a++){
            //     document.write('&nbsp;');        //每行星号前面的空格
            // }
            for(var b = i; b <= 5; b++){
                document.write('*' + '&nbsp;');     //每行星号的数量
            }
            document.write('<br>');
        }
        document.write('</div>');
        document.write('=========================ccc==========================');
    </script>
    <script>
        document.write('<div class="Tri-box">');
        for(var i = 1; i <= 5; i++){
            for(var a = 1; a < i; a++){
                document.write('&nbsp;&nbsp;');        //每行星号前面的空格
            }
            for(var b = i; b <= 5; b++){
                document.write('&nbsp;' + '*');     //每行星号的数量
            }
            document.write('<br>');
        }
        document.write('</div>');
        document.write('=========================ddd==========================');
    </script>


    <script>
        document.write('<div class="Tri-box">');
        for(var i = 1; i <= 5; i++){
            for(var a = i; a < 5; a++){
                document.write('&nbsp;&nbsp;');        //每行星号前面的空格
            }
            for(var b = 1; b <= i; b++){
                document.write('*' + '&nbsp;');     //每行星号的数量
            }
            document.write('<br>');
        }
        document.write('</div>');
        document.write('========================eee===========================');
    </script>




    <script>
        document.write('<div class="Tri-box">');
        for(var i = 1; i <= 5; i++){
            for(var a = i; a < 5; a++){
                document.write('&nbsp');
            }
            for(var b = 0; b <= 5; b++){
                document.write('*' + '&nbsp;');
           }
            document.write('<br>');
        }
        document.write('</div>');
        document.write('========================fff===========================');
    </script>
    <script>
        document.write('<div class="Tri-box">');
        for(var i = 1; i <= 5; i++){
            for(var a = 1; a < i; a++){
                document.write('&nbsp');
            }
            for(var b = 0; b <= 5; b++){
                document.write('*' + '&nbsp;');
           }
            document.write('<br>');
        }
        document.write('</div>');
        document.write('========================ggg===========================');
    </script>

    <script>
        document.write('<div class="Tri-box">');
        for(var i = 1; i <= 5; i++){
            // for(var a = 1; a < i; a++){
            //     document.write('&nbsp');
            // }
            for(var b = 0; b <= 5; b++){
                document.write('*' + '&nbsp;');
           }
            document.write('<br>');
        }
        document.write('</div>');
        document.write('========================hhh===========================');
    </script>



</body>

</html>