使用JavaScript循环嵌套解决各种图形
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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(" "); 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(" "); 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(" "); 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(" "); 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循环嵌套解决各种图形的主要内容，如果未能解决你的问题，请参考以下文章