Day1-JavaScript 的基础练习

最新推荐文章于 2025-10-20 19:51:32 发布

原创最新推荐文章于 2025-10-20 19:51:32 发布 · 403 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js基础

js基础专栏收录该内容

14 篇文章

订阅专栏

本文通过JavaScript演示了多种图形打印技巧，包括矩形、直角三角形、倒直角三角形、等腰三角形及99乘法表的生成，详细展示了如何使用嵌套循环和document.write方法在网页上绘制这些图形。

Day1-JavaScript 的基础练习***

1.使用JavaScript在页面上打印10行8列矩形的小圆点。

<script type="text/javascript">
	for(var i=0;i<10;i++){
		for(var j=0;j<8;j++){
			document.write("●");
		}
		document.write("<br />");
	}
</script>

实现效果:
在这里插入图片描述

2.使用JavaScript在页面上打印10行直角三角形的小圆点。

<script type="text/javascript">
	for(var i=0;i<10;i++){
		for(var j=0;j<i;j++){
			document.write("●");
		}
		document.write("<br />");
	}
</script>

实现效果:
在这里插入图片描述
3.使用JavaScript在页面上打印10行倒直角三角形的小圆点。

<script type="text/javascript">
	for(var i=0;i<10;i++){
		for(var j=0;j<10-i;j++){
			document.write("●");
		}
		document.write("<br />");
	}
</script>

实现效果：
在这里插入图片描述
4.使用JavaScript在页面上打印10行等腰三角形的小圆点。

<style>
	div{text-align:center;}
</style>
<script type="text/javascript">
	for(var i=0;i<10;i++){
		document.write("<div>");
		for(var j=0;j<=i;j++){
			document.write("<span>●&nbsp;&nbsp;&nbsp;</span>");
		}
		document.write("<br />");
		document.write("</div>");
	}
 </script>

实现效果:
在这里插入图片描述
5.使用JavaScript在页面上打印99乘法表。

<script type="text/javascript">
	document.write("<table>");
	for(var i=1;i<=9;i++){
		document.write("<tr>");
		for(var j=1;j<=i;j++){
		document.write("<td>"+i+"*"+j+"="+i*j+"&nbsp;&nbsp;&nbsp;"+"</td>");
 		}
		document.write("</tr>");
 	}
 	document.write("</table>");
 </script>

实现效果：
在这里插入图片描述