使用JavaScript實現長方形、直角三角形、平行四邊形、等腰三角形、倒三角、數字三角形

【循環嵌套的規律】
    一、外層循環控制行數,內層循環控制每行中元素的個數。javascript


【圖形題思路】
    一、肯定圖形有幾行,行數即爲外層循環次數;
    二、肯定每行中有幾種元素組成,有幾種元素表示有幾個內層循環;
    三、肯定每種元素的個數,這個個數即爲每一個內層元素循環次數。
     若是每種元素的個數不固定,則找出每種元素的個數,與行號的關係,
     這個關係表達式即爲內循環的最大值。html

一、長方形java

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <script type="text/javascript">
 9             /*
10             *****
11             *****
12             *****
13             *****
14             ***** 
15             */
16             for(var i=1;i<=5;i++){
17                 document.write("<br/>");
18                 for(j=1;j<=5;j++){
19                 document.write("*");
20                 }
21             }
22         </script>
23     </body>
24 </html>

二、直角三角形spa

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <script type="text/javascript">
 9             /*
10             * 
11             ** 
12             *** 
13             **** 
14             *****
15             */
16             for(i=1;i<=5;i++){
17                 document.write(" "+"<br/>");
18                 for(j=1;j<=i;j++){
19                 document.write("*");
20                     }
21             }
22         </script>
23     </body>
24 </html>

三、平行四邊形code

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <script type="text/javascript">
 9             /*
10             *****
11              *****
12               *****
13                *****
14                 *****
15             */
16             for(var i=1;i<=5;i++){
17                    document.write("<br/>");
18                    for(var j=1;j<=i-1;j++) {
19                        document.write("&nbsp;");
20                    }
21                    for (var k = 1; k <= 5; k++) {
22                    document.write("*");
23                }
24                }
25         </script>
26     </body>
27 </html>

四、等腰三角形htm

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <script type="text/javascript">
 9             /*
10              *
11             ***
12            *****
13           *******
14          *********
15             */
16             for(var i=1;i<=5;i++){
17                 document.write("<br/>");
18                 for(var j=1;j<=5-i;j++) {
19                     document.write("&nbsp;");
20                 }
21                 for (var k = 1; k <=2*i-1; k++) {
22                 document.write("*");
23                 }
24             }
25         </script>
26     </body>
27 </html>

五、倒三角blog

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <script type="text/javascript">
 9             /*
10              *********
11               *******
12                *****
13                 ***
14                  *
15             */
16             for(var i=0;i<=5;i++){
17                 document.write("<br/>");
18                 for(var j=0;j<=i;j++) {
19                     document.write("&nbsp;");
20                 }
21                 for (var k = 1; k <=2*(5-i)-1; k++) {
22                 document.write("*");
23                 }
24                 }
25         </script>
26     </body>
27 </html>

六、數字三角形ip

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <script type="text/javascript">
 9             /*
10              1
11             121
12            12321
13           1234321
14          123454321
15             */
16             for(var i=1;i<=5;i++){
17                 for(var j=1;j<=5-i;j++) {
18                     document.write("&nbsp;");
19                 }
20                 var num = 1;
21                 // 遞增的數
22                 for(var k=1; k<=i; k++){
23                     document.write(num);
24                     num++;
25                 }
26                 // 遞減的數
27                 num -= 2;
28                 for(var l=1; l<=i-1; l++){
29                     document.write(num);
30                     num--;
31                 }
32                 // 回車
33                 document.write("<br>");
34             }
35         </script>
36     </body>
37 </html>
相關文章
相關標籤/搜索