前端-JS四种九九乘法表输出

时隔几周我又更新了，嗨呀，没有其他理由，没干劲呢。

本文将对于js脚本语言的循环语句做一个简单的实践——四种九九乘法表的输出。

言归正传，js中循环语句可以大致分为以下几种：

1.for(开始条件;结束条件;迭代条件) {}
2.while(结束条件) {}
3.do{} while(结束条件);
4.增强for循环（针对对象）

而今天主要用到最常用的普通for循环。

对于九九乘法表，相信都不陌生。虽然乍一看需要写出四种样式感觉很难，但其实仔细一想只要写出一种其他三种就可以顺理成章的写出来了。那么，我们就拿“市面上”最常见的一种做例子。

/*
            |、
            | \
            ————
*/

首先分析该样式的特征，发现第一排只有一个表达式，第二排有两个表达式，第三排则出现了三个表达式，…依此类推是有序可循的。

而我们只需要将这种顺序规则带入到js中自然而然就明了了。不难猜测我们可以将代码分为两层循环，外层循环控制行数，内层循环控制每一行表达式的个数。

/*
            |、
            | \
            ————
        */
        document.write("</br>");
        //外层循环
        for(var i=1;i<10;i++) {
        //内层循环  针对结束条件发现第一层一个，第二层两个...依次递增，所以j<=i
            for(var j=1;j<=i;j++) {
            //以何种样式输出i*j=??
                document.write(j+"*"+i+"="+i*j);
                document.write("&nbsp;"+"&nbsp;");
                //整理乘法表的格式，一位数和两位数占用的空间调整为一样
                if(i*j<10) {
                    document.write("&nbsp;");
                }else {
                    document.write(" ");
                }
            }
            //每打印一行都必须换行输出
            document.write("</br>");
        }

结果如下：
这是最普通的一种方式~

1*1=1   
1*2=2   2*2=4   
1*3=3   2*3=6   3*3=9   
1*4=4   2*4=8   3*4=12   4*4=16  
1*5=5   2*5=10   3*5=15   4*5=20   5*5=25  
1*6=6   2*6=12   3*6=18   4*6=24   5*6=30   6*6=36  
1*7=7   2*7=14   3*7=21   4*7=28   5*7=35   6*7=42   7*7=49  
1*8=8   2*8=16   3*8=24   4*8=32   5*8=40   6*8=48   7*8=56   8*8=64  
1*9=9   2*9=18   3*9=27   4*9=36   5*9=45   6*9=54   7*9=63   8*9=72   9*9=81 

现在照葫芦画瓢即可得出其他三种方式，其实其他三种方式也就只有循环的条件有些出入。
代码如下：

                /*
            ————
            \  |
              \|
        */
        for(var i=1;i<10;i++) {
            for(var j=1;j<10;j++) {
                if(i>j) {
                    document.write("&nbsp;"+"&nbsp;"+"&nbsp;"+"&nbsp;"+"&nbsp;"+" ");
                }else {
                    document.write(i+"*"+j+"="+i*j);
                    document.write("&nbsp;"+"&nbsp;");
                    if(i*j<10) {
                        document.write("&nbsp;");
                    }else {
                        document.write(" ");
                    }
                }
                
            }
            document.write("</br>");
       }
        /*
            |、
            | \
            ————
        */
        document.write("</br>");
        for(var i=1;i<10;i++) {
            for(var j=1;j<=i;j++) {
                document.write(j+"*"+i+"="+i*j);
                document.write("&nbsp;"+"&nbsp;");
                if(i*j<10) {
                    document.write("&nbsp;");
                }else {
                    document.write(" ");
                }
            }
            document.write("</br>");
        }
       /*
            ————
            |  /
            |/
        */
        document.write("</br>");
        for(var i=1;i<10;i++) {
           for(var j=i;j<10;j++) {
               document.write(i+"*"+j+"="+i*j);
               document.write("&nbsp;"+"&nbsp;");
                if(i*j<10) {
                    document.write("&nbsp;");
                }else {
                    document.write(" ");
                }
           }
           document.write("</br>");
       }

        /*
              /|
            /  |
            ————
        */
        document.write("</br>");
        for(var i=1;i<10;i++) {
            for(var j=1;j<10-i;j++) {
                document.write("&nbsp;"+"&nbsp;"+"&nbsp;"+"&nbsp;"+"&nbsp;"+" ");
            }
            for(var j=1;j<=i;j++) {
                document.write(j+"*"+i+"="+i*j);
                document.write("&nbsp;"+"&nbsp;");
                if(i*j<10) {
                    document.write("&nbsp;");
                }else {
                    document.write(" ");
                }
            }
            document.write("</br>");
        }

执行结果如下：

注：实现的方式有多种，本人的方式仅供参考。
若有不妥之处，望广大网友指出，共同进步！！！