利用JavaScript的循环语句再页面中打印图形

Love The Way You Lie 2023-02-10 03:54 71阅读 0赞

## 利用JavaScript的循环语句再页面中打印图形 ##

前面两篇博客我们讲解怎么使用for循环进行数学的简单计算，这篇博客主要是利用js的循环语句在网页中打印出各种图形。

**1.利用js的循环语句打印矩形**

// 利用循环语句在网页中打印十行十列的矩形
 for (var j = 0; j < 10; j++) { 
 // 一行打印10个 @
 for (var i = 0; i < 10; i++) { 
 document.write("@");
 }
 document.write(" ");
 }
 
 // 利用while循环打印矩形
 var x=0;
 while(x<10){ 
 var y=0;
 while(y<10){ 
 document.write("☆");
 y++;
 }
 document.write(" ");
 x++;
 }

上面的问题关键在于搞清楚第一个for循环是决定打印多少行的，第二个for循环是决定每一行打印多少个。

**2.利用js的循环语句打印三角形**

// 正立三角形
 // 打印10行
 for (var j = 0; j < 10; j++) { 
 // 一行打印10个 @
 for (var i = 0; i < j+1; i++) { 
 document.write("@");
 }
 document.write(" ");
 }
 
 // 倒立三角形1
 for (var j = 0; j < 10; j++) { 
 // 一行打印10个 @
 for (var i = j; i < 10; i++) { 
 document.write("@");
 }
 document.write(" ");
 }
 
 // 倒立三角形2
 for (var j = 10; j > 0; j--) { 
 // 一行打印10个 @
 for (var i = 0; i < j; i++) { 
 document.write("@");
 }
 document.write(" ");
 }

上面代码打印三角形的关键在于第一个for循环同样是决定打印多少行，第二个for循环同样是决定每一行打印多少次，但不同的是每一行打印的次数不是固定的，所以只要找到这个规律就可以解决这个问题。

**3.利用js的循环语句打印平行四边形**

// 利用空格在矩形前面打印空白的三角形
 for (var j = 0; j < 10; j++) { 
 // 打印前面的三角形
 for (var k = 0; k < j; k++) { 
 document.write("   ");
 }
 // 一行打印10个☆
 for (var i = 0; i < 10; i++) { 
 document.write("☆ ");
 }
 document.write(" ");
 }
 
 // 利用css知识，在矩形前面打印透明的☆
 for (var j = 0; j < 10; j++) { 
 // 打印前面的三角形
 for (var k = 0; k < j; k++) { 
 document.write("☆");
 }
 // 一行打印10个☆
 for (var i = 0; i < 10; i++) { 
 document.write("☆ ");
 }
 document.write(" ");
 }

解决上面问题的思路主要是用三角形和矩形结合起来，然后在矩形的前面打印看不到的三角形，以达到将矩形整体向右推移的目的，最后实现打印平行四边形的效果。其实就是障眼法。

**视频讲解链接：  
https://www.bilibili.com/video/BV1Qz411q7mK**