码迷,mamicode.com
首页 > 编程语言 > 详细

使用JavaScript循环嵌套解决各种图形

时间:2017-09-17 00:26:27      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:回车   循环   meta   script   ++   ext   utf-8   思路   title   

【循环嵌套的规律】
    1、外层循环控制行数,内层循环控制每行中元素的个数。


【图形题思路】
    1、确定图形有几行,行数即为外层循环次数;
    2、确定每行中有几种元素组成,有几种元素表示有几个内层循环;
    3、确定每种元素的个数,这个个数即为每个内层元素循环次数。
     如果每种元素的个数不固定,则找出每种元素的个数,与行号的关系,
     这个关系表达式即为内循环的最大值。

1、长方形

 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>

2、直角三角形

 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>

3、平行四边形

 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>

4、等腰三角形

 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>

5、倒三角

 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>

6、数字三角形

 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>

 

使用JavaScript循环嵌套解决各种图形

标签:回车   循环   meta   script   ++   ext   utf-8   思路   title   

原文地址:http://www.cnblogs.com/lgc-17862800193/p/7533449.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!