1、循环的主要目的
![在这里插入图片描述](https://img-blog.csdnimg.cn/cbf25ffe11ef4730a76c00b0d64062a2.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(var i = 1;i<=100;i++){
console.log("我喜欢");
}
</script>
</head>
<body>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/d97fb5785ace4c5195302b2d083dce83.png)
2、js中的循环
![在这里插入图片描述](https://img-blog.csdnimg.cn/d0845aebfc6249a9ad831bc2afa19867.png)
3、for循环
![在这里插入图片描述](https://img-blog.csdnimg.cn/9508f938658c4e90b6173881e033c0d6.png)
3.1、for循环语法结构
![在这里插入图片描述](https://img-blog.csdnimg.cn/81c064b62de04938825a7f409c5e0a2d.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(var i = 1;i <= 100; i++){
console.log('你好吗');
}
</script>
</head>
<body>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/f16b26e0ad0a493388ca39194a94df37.png)
3.2、for循环执行过程
![在这里插入图片描述](https://img-blog.csdnimg.cn/b704ac2482904974b07644b23e5dc603.png)
- 1.首先执行里面的计数器变量var i = 1 .但是这句话在for里面只执行一次 index
- 2.去i<=100来判断是否满足条件,如果满足条件就去执行循环体不满足条件退出循环
- 3.最后去执行i++ i++是单 独写的代码递增第 一轮结束
- 4.接着去执行i<=100如果满足条件就去执行循环体不满足条件退出循环 第二轮
3.3、断点调试
![在这里插入图片描述](https://img-blog.csdnimg.cn/a895c6f696c64110859f652dd6ac35cc.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP56CB5ZOl5ZGA,size_20,color_FFFFFF,t_70,g_se,x_16)
3.4、案例:一行打印五个小星星
![在这里插入图片描述](https://img-blog.csdnimg.cn/4964581f08674fee88a3ed2ccbf19c6d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP56CB5ZOl5ZGA,size_14,color_FFFFFF,t_70,g_se,x_16)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str = '';
for(var i = 1;i<=5;i++){
str = str+'★';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/7753b1b75532414a9192f089cf357583.png)
3.5、双重for循环
3.5.1、双重for循环概述
![在这里插入图片描述](https://img-blog.csdnimg.cn/f89bb34ad6764d5f98743927a437c4bc.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP56CB5ZOl5ZGA,size_20,color_FFFFFF,t_70,g_se,x_16)
3.5.2、双重for循环执行过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(var i = 1;i <= 3;i++){
console.log('这是外层循环第' + i + '次');
for(var j = 1;j<= 3;j++){
console.log('这是内层循环第' + j + '次');
}
}
</script>
</head>
<body>
</body>
</html>
3.5.3、打印五行列的小星星
![在这里插入图片描述](https://img-blog.csdnimg.cn/d49b2fb830364169a11e62bb7b18ed9b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP56CB5ZOl5ZGA,size_20,color_FFFFFF,t_70,g_se,x_16)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str = '';
for(var i = 1;i <= 5; i++){
for(var j = 1;j <= 5;j++){
str = str + '★';
}
str = str +'\n'
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/c636586ed25e4c65a59d360b0b5f4c28.png)
3.5.4、打印倒三角案例
![在这里插入图片描述](https://img-blog.csdnimg.cn/c5ae1e1a1d62493dab8bc8e34910a00d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP56CB5ZOl5ZGA,size_10,color_FFFFFF,t_70,g_se,x_16)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str = '';
for(var i = 1;i <= 10;i++){
for(var j = i;j <=10;j++){
str = str+'★';
}
str = str +'\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
3.5.5、打印九九乘法表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str = '';
for( var i = 1;i <= 9;i++){
for(var j = 1;j <= i;j++){
str += j + 'x' + i + '=' + i * j +'\t';
}
str +='\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/8dc11f844070413283276de83b86375e.png)
3.6、for循环小结
![在这里插入图片描述](https://img-blog.csdnimg.cn/1be8671726f74e8baa283be9c615dae0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP56CB5ZOl5ZGA,size_14,color_FFFFFF,t_70,g_se,x_16)
4、while循环
![在这里插入图片描述](https://img-blog.csdnimg.cn/5c37eb4fa2fb454981f03269c92f6375.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP56CB5ZOl5ZGA,size_20,color_FFFFFF,t_70,g_se,x_16)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var message = prompt('你爱我吗?');
while(message != '我爱你'){
message = prompt('你爱我吗?');
}
alert('我也爱你呀')
</script>
</head>
<body>
</body>
</html>
5、do while循环
![在这里插入图片描述](https://img-blog.csdnimg.cn/09bf3d011a6b4cf083caf50ff50c6a3a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP56CB5ZOl5ZGA,size_20,color_FFFFFF,t_70,g_se,x_16)
6、循环小结
![在这里插入图片描述](https://img-blog.csdnimg.cn/52d8c36ae2984c2a9a23da789060cf67.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP56CB5ZOl5ZGA,size_20,color_FFFFFF,t_70,g_se,x_16)
7、案例
![在这里插入图片描述](https://img-blog.csdnimg.cn/c258c2cb2bab47baadfb2d1a5f87a853.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP56CB5ZOl5ZGA,size_20,color_FFFFFF,t_70,g_se,x_16)