JS实现上下左右对称的九九乘法表-优快云博客

本文介绍如何使用JavaScript结合HTML和CSS实现不同布局的九九乘法表，包括左下角、左上角、右下角及右上角四种对称布局方式，并提供for循环、while循环及do-while循环三种实现方法。

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

JS实现上下左右对称的九九乘法表

css样式

<style>
    table{
        table-layout:fixed;
        border-collapse:collapse;
    }
    td{
        padding:10px;
        border:1px solid #999;
    }
    td:empty{
        border:none;
    }
</style>

一左下角为度的梯形乘法表：

1.for循环代码

<table>
    <script>
        for(var i=1;i<=9;i++){
            document.write("<tr>");
                for(var j=1;j<=i;j++){
                    document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>")  
                }
            document.write("</tr>");

        }
    </script>
</table>

2.while循环

<table>
    <script>
        var i=1;
        while(i<=9){
            document.write("<tr>");
                var j=1;
                while(j<=i){
                    document.write("<td>"+j+" x "+i+"="+(j*i)+"</td>");
                    j++;
                }
            document.write("</tr>");
            i++;
        }
    </script>
</table>

3.do-while循环

<table>
    <script>
        var i=1;
        do{
            document.write("<tr>");
                var j=1;
                do{
                    document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>");
                    j++;
                }while(j<=i);
            document.write("</tr>");
            i++;
        }while(i<=9);
    </script>
</table>

示例图

二左上角为度的梯形乘法表：

1.for循环代码

<table>
    <script>
        for(var i=9;i>=1;i--){
            document.write("<tr>");
                for(var j=1;j<=i;j++){
                    document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>")  
                }
            document.write("</tr>");

        }
    </script>
</table>

2.while循环

<table>
    <script>
        var i=9;
        while(i>=1){
            document.write("<tr>");
                var j=1;
                while(j<=i){
                    document.write("<td>"+j+" x "+i+"="+(j*i)+"</td>");
                    j++;
                }
            document.write("</tr>");
            i--;
        }
    </script>
</table>

3.do-while循环

<table>
    <script>
        var i=9;
        do{
            document.write("<tr>");
                var j=1;
                do{
                    document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>");
                    j++;
                }while(j<=i);
            document.write("</tr>");
            i--;
        }while(i>=1);
    </script>
</table>

示例图

三右下角为度的梯形乘法表：

1.for循环代码

<table>
    <script>
        for(var i=1;i<=9;i++){
            document.write("<tr>");
                for(var a=1;a<=9-i;a++){
                    document.write("<td></td>");
                }
                for(var j=1;j<=i;j++){
                    document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>")  
                }
            document.write("</tr>");

        }
    </script>
</table>

2.while循环

<table>
    <script>
        var i=1;
        while(i<=9){
            document.write("<tr>");
                var a=1;
                while(a<=9-i){
                    document.write("<td></td>");
                    a++;
                }
                var j=1;
                while(j<=i){
                    document.write("<td>"+j+" x "+i+"="+(j*i)+"</td>");
                    j++;
                }
            document.write("</tr>");
            i++;
        }
    </script>
</table>

3.do-while循环

<table>
    <script>
        var i=1;
        do{
            document.write("<tr>");
                var a=0;
                do{
                    document.write("<td></td>");
                    a++;
                }while(a<=9-i);

                var j=1;
                do{
                    document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>");
                    j++;
                }while(j<=i);
            document.write("</tr>");
            i++;
        }while(i<=9);
    </script>
</table>

示例图

四右上角为度的梯形乘法表：

1.for循环代码

<table>
    <script>
        for(var i=9;i>=1;i--){
            document.write("<tr>");
                for(var a=1;a<=9-i;a++){
                    document.write("<td></td>");
                }
                for(var j=1;j<=i;j++){
                    document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>")  
                }
            document.write("</tr>");

        }
    </script>
</table>

2.while循环

<table>
    <script>
        var i=9;
        while(i>=1){
            document.write("<tr>");
                var a=1;
                while(a<=9-i){
                    document.write("<td></td>");
                    a++;
                }
                var j=1;
                while(j<=i){
                    document.write("<td>"+j+" x "+i+"="+(j*i)+"</td>");
                    j++;
                }
            document.write("</tr>");
            i--;
        }
    </script>
</table>

3.do-while循环

<table>
    <script>
        var i=9;
        do{
            document.write("<tr>");
                var a=0;
                do{
                    document.write("<td></td>");
                    a++;

                }while(a<=9-i);
                
                var j=1;
                do{
                    document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>");
                    j++;
                }while(j<=i);
            document.write("</tr>");
            i--;
        }while(i>=1);
    </script>
</table>

示例图