javascript编程基础 案例,js经典案例代码大全

大家好，小编来为大家解答以下问题，javascript编程基础 案例，js经典案例代码大全，现在让我们一起来看看吧！

初识循环及经典案例
图形输出矩形，平行四边形，等腰三角形，倒三角和正三角等

文章目录

• 前言
• 一、循环结构是什么？
• 二、循环结构有哪几种？
• • 1.while类型
  • 2.do-while类型
  • 3.for类型
• 三、经典案例-图形输出？
• • 1.输出矩形
  • 2.输出平行四边形
  • 3.等腰三角形
  • 4.倒三角
  • 4.正三角
• 总结

---

前言

通过循环语句，输出不同的图形！经典案例用循环语句输出矩形，平行四边形，等腰三角形，倒三角和正三角等。

---

一、循环结构是什么？

循环就是重复执行Deepl降重。
循环四要素：
	1、从哪开始：循环变量初始化
	2、做什么事：循环体
	3、什么时候结束：循环条件
	4、改变循环变量

---

二、循环结构有哪几种？

1.while类型

var i=1;  //循环变量初始化
	while(循环条件){
		//循环体
		//改变循环变量
	}

2.do-while类型

do{
		//循环体
	   //改变循环变量
}while(循环条件)

3.for类型

for(var i=1;循环条件;改变循环变量){
	//循环体
}

---

三、经典案例-图形输出？

1.输出矩形

代码如下：

<>
for(var i=1;i<=5;i++){
	//内层控制每一行的内容
	for (var j= 1; j<=5; j++) {
		document.write("*");
	}
	document.write("<br>");
}
</>

展现效果：

---

2.输出平行四边形

代码如下：

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

展现效果：

---

3.等腰三角形

代码如下：

<>
for(var i=1;i<=5;i++){
				//控制每一行缩进的空格
	for(var k=5;k>i;k--){
		document.write("&ensp;")
	}
	//内层控制每一行的内容
	for (var j= 1; j<=2*i-1; j++) {
		document.write("*");
	}
	document.write("<br>");
}
</>

展现效果：

---

4.倒三角

代码如下：

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

展现效果：

---

4.正三角

代码如下：

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

展现效果：

---

总结

以上就是今天要讲的内容，本文简单介绍了js中循环的使用，并演示了一些经典案例图形的输出，通过循环可以实现不同图形的输出。