循环语句
while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
//打印3次班长爱坤哥
//复制粘贴弊端：(1)代码冗余 (2)维护不便
// console.log( '班长爱坤哥' )
// console.log( '班长爱坤哥' )
// console.log( '班长爱坤哥' )
/*循环结构：代码重复执行
while循环语法
while( 条件 true/false ){
循环体：需要重复执行的代码
}
执行规则
1.判断条件是否成立
1.1 true : 则执行循环体代码
1.2 false : 循环结束，执行大括号后面的代码
2.重复步骤1
*/
//1.声明变量记录循环次数(循环变量)
let num = 1
//2.循环条件
while (num <= 10) {
console.log("班长爱坤哥")
//3.循环变量自增
num++
}
console.log("班长完事了")
</script>
</body>
</html>
1.2-for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
for循环： 1.声明循环变量 2.循环条件 3.循环变量自增 写在一个小括号中，代码更加简洁易读
语法：
for(语句1;语句2;语句3){
循环体：需要重复执行的代码
}
执行规则
1. 执行语句1(声明循环变量)
2. 判断语句2结果是否成立(循环条件)
2.1 true : 执行循环体
* 2.1.1 执行语句3(循环变量自增)
2.2 false: 循环结束，执行大括号后面的代码
3. 重复步骤2
*/
for(let i = 1; i <= 3;i++){
console.log('班长爱坤哥')
}
console.log('班长完事了')
</script>
</body>
</html>
break与continue关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/*
continue : 结束本次循环体，立即进入下一次循环判断
* continue关键字只能用于循环语句
break: 结束整个循环语句，立即执行大括号后面的代码
* break关键字可以用于 循环语句 + switch-case
*/
//模拟吃10个饺子
for (let i = 1; i <= 10; i++) {
//continue : 吃到第五个饺子，发现虫子。 第五个饺子不吃，但是没吃饱后面饺子继续吃
// if( i === 5 ){
// continue
// }
//break : 吃到第五个饺子，吃饱了。 后面的饺子不吃了。
if (i === 5) {
break
}
document.write(`<p>我正在吃第${i}个饺子</p>`)
}
</script>
</body>
</html>
练习 打印1-100所有偶数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/* 本案例思路在开发中很常见，叫做筛选 ： 找出一组数据中,符合条件的数据
(1)先遍历(循环)每一个数据
(2)找出符合条件的数据
*/
//需求： 打印 1-100 所有 偶数
for (let i = 1; i <= 100; i++) {
if (i % 2 == 0) {
console.log(i)
}
}
</script>
</body>
</html>
练习二 ATM取款机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/*
需求：用户可以选择1-存钱、2-取钱、3-查看余额和4-退出功能
思路分析：
(1)存钱 ： 数学加法
(2)取钱 ： 数学减法
(3)查看余额 ： 变量存储数据
(4)退出功能 : 结束循环 break
*/
//1.声明变量存储银行余额 和 用户操作
let money = 1000
let caozuo = null
//2.写循环
while (caozuo !== 4) {
//用户输入
caozuo = +prompt('请输入您的操作 1-存钱 2-取钱 3-查看余额 4-退出')
//用户操作是一个固定值匹配，这里使用switch-case更好
switch (caozuo) {
case 1:
let num1 = +prompt('请输入您想要存多少钱')
money += num1
break
case 2:
let num2 = +prompt('请输入您想要取多少钱')
money -= num2
break
case 3:
alert(`您当前的余额是：${money}`)
break
case 4:
break
default:
alert('暂时不支持这个功能')
break
}
}
</script>
</body>
</html>
