利用JavaScript的循环语句再页面中打印图形
前面两篇博客我们讲解怎么使用for循环进行数学的简单计算，这篇博客主要是利用js的循环语句在网页中打印出各种图形。
1.利用js的循环语句打印矩形
// 利用循环语句在网页中打印十行十列的矩形for (varj=0; j<10; j++) { // 一行打印10个 @for (vari=0; i<10; i++) { document.write("@"); } document.write("<br/>"); } // 利用while循环打印矩形varx=0; while(x<10){ vary=0; while(y<10){ document.write("☆"); y++; } document.write("<br/>"); x++; }
上面的问题关键在于搞清楚第一个for循环是决定打印多少行的，第二个for循环是决定每一行打印多少个。
2.利用js的循环语句打印三角形
// 正立三角形// 打印10行for (varj=0; j<10; j++) { // 一行打印10个 @for (vari=0; i<j+1; i++) { document.write("@"); } document.write("<br/>"); } // 倒立三角形1for (varj=0; j<10; j++) { // 一行打印10个 @for (vari=j; i<10; i++) { document.write("@"); } document.write("<br/>"); } // 倒立三角形2for (varj=10; j>0; j--) { // 一行打印10个 @for (vari=0; i<j; i++) { document.write("@"); } document.write("<br/>"); }
上面代码打印三角形的关键在于第一个for循环同样是决定打印多少行，第二个for循环同样是决定每一行打印多少次，但不同的是每一行打印的次数不是固定的，所以只要找到这个规律就可以解决这个问题。
3.利用js的循环语句打印平行四边形
// 利用空格在矩形前面打印空白的三角形for (varj=0; j<10; j++) { // 打印前面的三角形for (vark=0; k<j; k++) { document.write(" "); } // 一行打印10个☆for (vari=0; i<10; i++) { document.write("☆ "); } document.write("<br/>"); } // 利用css知识，在矩形前面打印透明的☆for (varj=0; j<10; j++) { // 打印前面的三角形for (vark=0; k<j; k++) { document.write("<span style='opacity:0'>☆</span>"); } // 一行打印10个☆for (vari=0; i<10; i++) { document.write("☆ "); } document.write("<br/>"); }
解决上面问题的思路主要是用三角形和矩形结合起来，然后在矩形的前面打印看不到的三角形，以达到将矩形整体向右推移的目的，最后实现打印平行四边形的效果。其实就是障眼法。
视频讲解链接：
https://www.bilibili.com/video/BV1Qz411q7mK
