JavaScript-页面打印正方形,各种三角形与菱形

Posted 2020-08-24 张润昊的博客

一.   正方形

a)   在第一个for循环中控制,一共输出几行.依靠的是,每次输出一行,就会在后面输出一个换行符<br>;

b)   在第二个for循环中控制每行输出几个五角星.这样的话,就可以每一行中打印10个五角星.

c)   当i=0;时,进入第一个循环,然后给j赋值为0,就会进入第二个循环,开始打印.打印10 个之后,结束第二个for循环,打印一个换行符.此时第一行的五角星就打印完毕了.

d)   以此类推,打印10行.因为每行打印10个,进而形成了正方形.

注:为什么小于10,反而打印10个?

因为当i=0;时进行了打印,9的时候,也进行了打印.0-9为10个数字.

          for (var i = 0 ; i < 10 ; i++) {
                   for (var j = 0 ; j < 10 ; j++) {
                       document.write("☆");
                   }
                   document.write("<br />")
               }

 

 

二.   三角形_左下.

a)   同样,第一行控制打印了多少行.依旧打印了10行,i的值为0-9;

b)   j的判断条件为j<=i,j用来控制打印了多少个,当i等于0的时候,j成立的条件只有第一个j=0的时候,也就只能打印一个.然后打印换行符,当i等于1的时候,j成立的条件有两个,0和1,就在第二行打印了两个.

c)   也就说,每一行打印的个数,等于这一行所在的行数.比如:第一行就打印1个,第二行就打印两个.以此类推.

d)   j<=i与j<i的区别:若是判断条件改为了j<i,那么每一行就会少打印最后一个.例如,在第一行的时候,i=0;j也等于0;就无法进入判断条件.第一行只打印一个换行符.在第二行的时候,j=0可以打印一个五角星,但是j=1的时候,就没有办法打印了,也就只能打印1个.从而会打印出一个比之前每一行都少一个的三角形.

        for (var i = 0; i < 10; i++) {
                   for (var j = 0; j <= i; j++) {
                       document.write("☆");
                   }
                   document.write("<br />");
               }

 

三.   三角形-左上

a)   i的取值只能是从10开始递减,因为我们想取到10个十字,若是判断条件为>0的话,那么0的值就没有办法取到,只能是10-1的一个范围.这样的话,依旧可以打印出10行.

b)   因为我们想要打印左上方的三角形,那么三角形的个数,就是从上到下,以此减少的.每一行打印的个数由j来控制.因为每一行 打印的个数呈现递减趋势, 刚刚好符合i的顺序.

c)   第一行打印10个,第二行打印9个.j是从0开始的,只要让其小于i的值,就可以形成这种顺序.例如当i=10时候,第一行,j从0开始,0-9 打印10个;当i=9的时候,第二个,j是0-8;打印9个.以此类推.

d)   一直到最后一行,i=1;那么只有j等于0可以打印一个.

e)   j<i与j<=i的区别,如果我们将j的判断条件改为了j<=i,表示的意思就是当j等于i的值的时候也会打印一个,第一行中i的取值为1-10;j的取值就会变成0-11,打印11个.以此类推每一行都会多打印一个.打印到最后一行,也就是i等于1的时候,j的取值为0,1,就会打印两个.但是i的取值已经到了最后,却打印了两个星星.此为错误.

f)   如是让j<=i,只能让j的取值从1开始,那么j的取值个数才能和i保持相等.

           for (var i = 10; i > 0 ; i--) {
                   for (var j = 0 ; j < i ; j++) {
                       document.write("☆");
                   }
                   document.write("<br />");
               }

 

四.   .三角形-右上

a)   若是想打印右上方的三角形的话,我们就需要用空格挤开.因为,打印是从左到右逐渐进行的.我们可以先打印出来一个正方形,将这个然后判断打印的位置,决定是打印星星还是空格.

b)   所以i的取值依旧是从10-1;打印行;然后j的取值也是从10-1打印10个.其实吧,就是每一行都打印,只是在没有一行中打印的空格个星星的个数不一样.例如在第一行中我们打印10个星星不打印空格.在第二行中,我们先打印一个空格,再打印9个星星.

c)   第一行:i=10的时候,进入j.然后j也是10,就会进入判断j<=i.因为j是递减的,而j的最大值为10,此时i的值为10.故都会打印为星星.第一行也就会打印10个星星.

d)   第二行:i=9的时候,在第一个j=10的时候,会打印一个空格,然后j的取值就会是9-1,就会打印为星星.

e)   最后一行,i的取值为1;j在10-2的时候,会打印9个空格,最后j也等于1的时候,打印一个星星.

f)   若是将判断条件改为了j<i,那么每一行都会少打印一个星星.去掉了每一行的第一个星星.最后一行也就只打印空格.

         for (var i = 10; i > 0 ; i--) { //控制行数.
                   for ( var j = 10 ; j > 0; j--) {
                       //每行打印的个数,每行都要打印,先是打印全是星星.
                       //然后,逐渐在前面打印空格的个数,减少后面星星的个数.
                       if ( j <= i ) {
                           document.write("☆");
                       }else {
                           document.write("&nbsp;")
                       }
                   }
                   document.write("<br />")

 

五.   三角形-右下

a)   方法与右上类似.也是每一行都要打印,只不过打印的顺序不同,先是打印空格,再打印星星.

b)   同样,在第一行中,i=10;进入j循环,打印十个.进行判读,j<=i,j的取值是从1-10,逐渐增大.j取值1-9的时候,都是打印空格,只有当j取值为10的时候打印星星.

c)   在第二行中,i的取值为9,那么j的取值从1-8的时候打印空格,9,10的时候打印星星.

d)   在最后一行中,i的取值为1,j的取值是从1-10,都是>=i的,所以都会打印为星星.

 

               for (var i = 10; i > 0; i--) { //控制行数.
                   for (var j = 1; j <=10; j++) {
                       //每行打印的个数,每行都要打印,先是打印全是星星.
                       //然后,逐渐在前面打印空格的个数,减少后面星星的个数.
                       if (j >= i) {
                           document.write("☆")
                       } else {
                           document.write("&nbsp;");
                       }
                   }
                   document.write("<br />")
               }

 

六.   菱形

a)   打印菱形的时候,分成上下两个部分.

b)   上面的部分为4行.下面的部分为三行,以此来组成一个菱形.

c)   上面的部分构成为:

第一行:三个空格,一个星星.

第二行:两个空格,三个星星.

第三行:一个空格,五个星星.

第三行;没有空格,七个星星.

d)   其实我们在打印两个for循环的时候,第二行打印的个数,就是j的那个判断条件,j小于几就打印几个.这样的话就可以看出.在第一行中空格为3,i为0 .空格为2,i为1.这样的话就能够看出空格和i的规律,就是3-i.那么判断条件就是3-i.

e)   同样的方法发现星星和i的关系.将其写为判断条件,就能知道在这一行中,需要打印多少个某种东西.

f)   下面部分的构成类似:

第一行:一个空格,五个星星.

第二行:两个空格,三个星星.

第三行:一个空格,五个星星.

               for (var i = 0 ; i < 4; i++) {
                   for (var j = 0 ; j < 3-i; j++) {
                       document.write("&nbsp;")
                   }
                   for (k = 0 ; k < 2*i+1 ; k++) {
                       document.write("☆")
                   }
                   document.write("<br />")
               }

               for (var i = 0 ; i < 3 ; i++) {
                   //打印空格
                   for(var j = 0 ; j <= i ; j++){
                       document.write("&nbsp;")
                   }
                   //打印星星
                   for ( var k = 0; k < 5-i*2 ; k ++) {
                       document.write("☆")
                   }
                   document.write("<br />")
               }