JavaScript-頁面打印正方形,各種三角形與菱形


一.   正方形

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 />")
               }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM