javascript 打印菱形（含分析过程及代码）

时间：2024-11-10 19:18:06

javascript 打印菱形

在这里插入图片描述

分析：

1.首先思考如果打印矩形的话怎么写代码？

需要两层循环，外层控制行数，内层控制打印一行中的 * 的个数，这里选择for循环

代码

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

在这里插入图片描述

2.如果是打印菱形，那么在同一行中既需要控制空格的个数，又需要控制*的个数，所以内循环应该是并列的两个for循环

3.设置一个参数为i的外循环控制行数，两个参数分别为j k的并列的内循环控制打印的字符

4.前4行打印空格3,2,1,0；打印星号1,3,5,7. （星号个数为2*n-1）

5.后3行打印空格1,2,3；打印星号5,3,1.（星号个数为）

根据4和5的关系写代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    var i,j,k;
	for(i=1;i<=4;i++){
		//前四行
		for(j=1;j<=4-i;j++){
			
			document.write("&nbsp;&nbsp;");       //4-j 控制空格的数量
		}
		for(k=1;k<=2*i-1;k++){
			
			document.write("*&nbsp;");     //2*i-1 控制*的数量
		}
		document.write("<br/>");
	}
		//后三行
	for(i=1;i<=3;i++){
		
		for(j=1;j<=i;j++){
		
			document.write("&nbsp;&nbsp;");	     //i控制空格的数量
		}
		for(k=1;k<=7-2*i;k++){
			
			document.write("*&nbsp;");        // 7-2*i控制*的数量
		}
		document.write("<br/>");
	}
    </script>
</head>
<body>
</body>
</html>

在html中 &nbsp; 表示空格    添加两个是扩大间距

这是显示效果：
在这里插入图片描述

相关文章