使用JavaScript实现长方形、直角三角形、平行四边形、等腰三角形、倒三角、数字三角形

【循环嵌套的规律】
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>

相关阅读:
ElasticSearch 查询语法
 自定义的带tab的可左右滑动的viewpager之二viewpager与fragment不兼容
 QT5 串口收发实例代码
 Communications link failure报错的处理
 mac 环境下mysql 不能删除schema问题的解决办法
 [置顶] How to dump redo log entry？
pjsip视频通信开发(上层应用)之拨号界面整体界面功能实现
 windows command ftp 中文文件名乱码解决方法
 (字符串的模式匹配4.7.18)POJ 2406 Power Strings(求一个字符串的最小重复串)
通过程序 VB.Net 或 C# 读取文本文件行数
原文地址：https://www.cnblogs.com/lgc-17862800193/p/7533449.html