微信扫一扫看面试题

关注面试题库

原生js输出直角三角形和金字塔效果

正立直角三角形

思路:

1:两个for循环,外层for循环控制换行,里层for循环控制每行输出

2:外循环,每循环一次,输出换行符,所以设置一个变量i,控制层数

代码:

for(var i=1;i<=5;i++){
	document.write("<br/>");
	}

3:里循环,设置变量j,记录每循环一次要输出的❤数量

在这里插入图片描述

for(var j=1;j<=i;j++){
	document.write("♥");
	}

完整代码:

for(var i=1;i<=5;i++){
		for(var j=1;j<=i;j++){
					document.write("♥");
					}
		document.write("<br/>");
	}

倒直角三角形
思路:

1:外层for循环输出5次,设置变量x值,初始值从最大值开始

2:里层for循环根据x值的变化,每次循环输出和x值一样数量的♥
在这里插入图片描述

代码:

for(var x=5;x>0;x--){
		for(var y=1;y<=x;y++){
					document.write("♥");
					}
		document.write("<br/>");
		}

正金字塔
思路:

1:控制输出行数,所以有个最外层for循环控制

2:每行不单只是输出♥,还有空格,让♥的位置能在正确的地方,方便看逻辑关系,用另一个图标♠代替空格

每行输出关系图

在这里插入图片描述

左边空格规律图

在这里插入图片描述

右边输出内容规律图

在这里插入图片描述

代码:

for(var a=1;a<=5;a++){
				for(var b=1;b<=(5-a);b++){
					document.write("♠");
				}
				for(var c=1;c<=2*a-1;c++){
					document.write("♥");
				}
			document.write("<br/>");
			}

倒立金字塔
思路:

1:控制输出行数,所以有个最外层for循环控制

2:每行不单只是输出♥,还有空格,让♥的位置能在正确的地方,方便看逻辑关系,用另一个图标♠代替空格

左边空格规律图
在这里插入图片描述
左边空格规律图

在这里插入图片描述

代码:

for(var a=1;a<=5;a++){
				for(var b=1;b<=(a-1);b++){
					document.write("♠");
				}
				for(var c=1;c<=11-2*a;c++){
					document.write("♥");
				}
			document.write("<br/>");
posted @ 2022-07-23 10:04  web前端面试小助手  阅读(620)  评论(0)    收藏  举报