JS的基础运用之JS中用*打印三角形，菱形

最新推荐文章于 2022-11-02 20:47:18 发布

宋顶飞sdf

最新推荐文章于 2022-11-02 20:47:18 发布

阅读量2.6k

点赞数 2

分类专栏： JS 文章标签： JS中利用for循环打印菱形

本文链接：https://blog.csdn.net/weixin_42048159/article/details/85269673

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

**JS的基础运用之JS中用*打印三角形，菱形**

1.图一和图二是利用JS语句画出来的两个直角三角形，下边我以图一为例，说一下我的做法。
图一星号逐行递增，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>星号输出</title>
</head>
<body>
	<script>
		for(var n=1;n<5;n++){		   //外部循环决定输出的行数
			for(var j=0;j<n;j++){
				document.write("*");  //内部循环的循环次数，根据行数决定（输出对应的星号个数）
			}
			document.write("<br>");    //输入完之后需要换行；
		}
	</script>
</body>
</html>

**2.**图二的做法与图一类似，图二是每行的星号逐行递减，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>星号输出</title>
</head>
<body>
	<script>
		for(var n=4;n>0;n--){
			for(var j=0;j<n;j++){
				document.write("*");
			}
			document.write("<br>");
		}
	</script>
</body>
</html>

3.通过画三角形，我们也可以延伸出乘法表的写法，
图三乘法口诀表
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乘法口诀</title>
    
</head>
<body>
	<script type="text/javascript">
    for(var j=1;j<9;j++){
       for(var i=1;i<=j;i++){
        document.write(i+"×"+j+"="+i*j+"&nbsp");
    }
    document.write("<br/>");
}
    </script>
</body>
</html>

4.锐角三角形 锐角三角形是在直角三角形的基础上每行加入了一些空格。
图四锐角三角形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>锐角三角形</title>
</head>
<body>
	<script>
		var y=5;
		for(var line=1;line<6;line++){
			for(var i=0;i<y;i++){
				document.write("&nbsp");
			}
			y--;		
			for(var j=0;j<2*line-1;j++){
				document.write("*");
			}
			document.write("<br>");
		}
	</script>
</body>
</html>

5.菱形
菱形是js利用 *号写三角形的进阶用法，三角形中 * 号的递曾和递减都是2个，看起来写法比前面复杂了一些，其实只是一个简单的if语句的嵌套
图五菱形
方法1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>星号练习-菱形</title>
</head>
<body>
	<script>
		var line=10;
		for(var i=1;i<line;i++){
			if (i<5) {
				for(var j=0;j<line-i-5;j++){
					document.write('&nbsp');
				}
				for(var j=0;j<2*i-1;j++){
					document.write('*');
				}
			}else{
				for(var j=0;j<i-line+5;j++){
					document.write('&nbsp');
				}
				for(var j=(line-i)*2-1;j>0;j--){
					document.write('*');
				}
			}
			document.write('<br>');
		}
	</script>
</body>
</html>

方法2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>菱形</title>
</head>
<body>
	<script>
		var x=1;
		var y=5;
		for(var line=1;line<=9;line++){
		    for(var i=0;i<y;i++){
		    	document.write("&nbsp")
		    }
		    if (line<5) {
		    	y--;
		    }
		    else{
		    	y++;
		    }
			for(var j=0;j<2*x-1;j++){
				document.write("*");
			}
			if (line<5) {
				x++;
			}else{
				x--;
			}
			document.write("<br>");
		}
	</script>
</body>
</html>

以上是我的一些总结，感谢读者指出。

宋顶飞sdf

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
JS的基础运用之JS中用*打印三角形，菱形

JS的基础运用之JS中用*打印三角形，菱形1.图一和图二是利用JS语句画出来的两个直角三角形，下边我以图一为例，说一下我的做法。图一星号逐行递增，&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;星号输出&lt;/tit
复制链接

扫一扫