循环的目的:可重复执行某些代码
一、for循环:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// for 重复执行某些代码 通常与计数有关
// 语法结构
// for(初始化变量; 条件表达式; 操作表达式){
// 循环体
// }
// 初始化变量 就是用var 生命的一个普通变量 通常用于作为计数器使用
// 条件表达式 就是用来决定每一次循环是否继续执行,就是终止的条件
// 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)
// 代码体验
for(var i = 1 ; i<= 100; i++){
console.log('TFBOYS');
}
</script>
</head>
<body>
</body>
</html>
1、for循环的执行过程:
for循环执行相同的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// for 循环可以执行相同的代码
for( var i = 1; i<=100; i++){
console.log('TFBOYS');
}
//可以让用户控制输出的次数
var num = prompt('请i你输入次数');
for(var i = 1; i <= num; i++){
// console.log('TFBOYS');
alert('TFBOYS');
}
</script>
</head>
<body>
</body>
</html>
for循环执行不同的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// for 循环可以重复执行不同的代码 因为有计数器变量 i的存在 i每次循环值都会变化
// 想要输出 一个人 1~100岁
// for( var i = 1; i <= 100; i++){
// console.log('这个人今年'+ i +'岁了');
// }
for(var i = 1; i <= 100; i++){
if(i == 1){
console.log('这个人今年1岁了,他出生了');
}else if( i == 100){
console.log('这个人今年100岁了,好长寿');
} else{
console.log('这个人今年'+ i +'岁了');
}
}
</script>
</head>
<body>
</body>
</html>
for循环重复相同的操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 求1~100之间所有的整数的累加和
// 需要循环100次,我们需要一个计数器i
// 需要一个存储结果的变量sum ,但是初始值一定是0
// 核心算法:1+2+ 3+4..... , sum = sum + i;
var sum = 0; //求和的变量
for(var i = 1; i <= 100; i++){
sum += i ;
}
console.log(sum);
</script>
</head>
<body>
</body>
</html>
for循环案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" conten