4.while循环
while循环
<script>
// 1 变量初始值
let i = 1;
// 2 终止条件
while (i <= 10) {
document.write(`这个是第${i}循环`);
// 3 变量需要改变
i++;
}
</script>
while循环小案例
<script>
// 1 接受用户的第一个输入 循环的次数
let num = +prompt('你想要循环多少次');
// 2 变量 初始值
let i = 1;
// 3 循环条件
while (i <= num) {
document.write(`月薪过万 ${i}`);
// 4 变量变化
i++;
}
</script>
while循环1-100案例
<script>
/*
while循环 习惯会 i ++
i = 1
i = 2
i = 3
...
*/
let i = 1;
while (i <= 100) {
document.write(`${i} <br/>`);
i++;
}
</script>
while循环 求偶数和加简化案例
<script>
/*
1-100 偶数和
2 + 4 + 6 + 8 + 10。。。。
去判断当前是不是偶数呢 对2 取整 求余 没有余数
2 % 2 = 0
4 % 2 = 0
5 % 2 = 1
原因：
1 偶数和奇数判断条件 对2求余 是否等于 0
2 if条件 来判断当前的i的是不是偶数
是 去执行什么的样 业务 计算总和 sum += i ;
*/
偶数常规写法
let i = 1;
let sum = 0;
while (i <= 100) {
// 这一行代码不能直接执行 满足某些条件才执行
if (i % 2 === 0) {
// console.log('i', i);
sum += i;
}
// 无论当前的i是偶数还是奇数 i++ 都要执行 必须进行下一轮的循环
i++;
}
console.log('你要的1-100的偶数和', sum);
</script>
偶数和优化简写
<script>
let i = 1;
let sum = 0;
while (i <= 100) {
// 左边满足条件了等于 true 才去执行右边的代码！！
(i % 2 === 0) && (sum += i);
i++;
}
console.log('你要的1-100的偶数和', sum);
</script>
while循环 说爱我案例
就是一种判断，判断不成功就一值循环，直至判断成立为止
<script>
/*
需求： 问是否 爱我 是就 不再问了 不是的就一直问
分析
一直问 prompt 一直被执行 肯定要放在 while循环里面
决定能否继续循环的条件是什么。。。
1 i<10 ...
2 str !== "爱" 就一直问
*/
// 1 定义 初始变量
let str; // undefined
// 2 判断的条件 （满足什么条件 就继续 执行循环）
while (str !== '爱') {
// 弹窗
str = prompt('你爱不爱我?');
}
// 变量的初始值 变量判断循环的条件 变量需要被修改
</script>
while循环-简易ATM案例，由于思路比较多，分三步分析完成
第一步-实现无限弹窗
<script>
/*
需求：
1 打开页面的时候 弹出一个对话框
显示以下内容
1 取款
2 存款
3 查看余额
4 退出
2 用户就需要输入一些信息
1 用户输入 “1”
还会继续弹出窗口 又问一遍 以上 1 的内容
2 用户输入 “2”
还会继续弹出窗口 又问一遍 以上 1 的内容
3 用户输入 “3”
还会继续弹出窗口 又问一遍 以上 1 的内容
4 用户输入 “4” 结束了。。
分析：
1 只要用户输入的 不是4 都弹窗 否则就不弹窗 （回顾 上午讲 爱我爱我 （只要用户输入的不是爱 就一直弹窗） ）
*/
// 1 声明一个变量 用来存放 用户的输入的 (1,2,3,4)
let input;
// 2 写循环的条件
while (input !== 4) {
// 疯狂弹窗
// 一定要让 变量 发生变化
input = +prompt(`
1 取款
2 存款
3 查看余额
4 退出
`);
}
</script>
第二步- 用户输入数字的功能
<script>
/*
需求：
1 打开页面的时候 弹出一个对话框
显示以下内容
1 取款
2 存款
3 查看余额
4 退出
2 用户就需要输入一些信息
1 用户输入 “1”
还会继续弹出窗口 又问一遍 以上 1 的内容
2 用户输入 “2”
还会继续弹出窗口 又问一遍 以上 1 的内容
3 用户输入 “3”
还会继续弹出窗口 又问一遍 以上 1 的内容
4 用户输入 “4” 结束了。。
分析：
1 只要用户输入的 不是4 都弹窗 否则就不弹窗 （回顾 上午讲 爱我爱我 （只要用户输入的不是爱 就一直弹窗） ）
*/
let input;
while (input !== 4) {
input = +prompt(`
1 取款
2 存款
3 查看余额
4 退出
`);
// 开始对用户的输入做判断
if (input === 1) {
console.log('执行1的业务');
} else if (input === 2) {
console.log('执行2的业务');
} else if (input === 3) {
console.log('执行3的业务');
} else if (input === 4) {
console.log('开始退出了');
}
}
</script>
第三步- 用户输入数字的功能-执行对应功能
<script>
/*
需求：
0 存取款
定义一个 存款的金额
1 用户输入 “1” 存款
1 再弹出一个窗口 让用户来输入想要存款的数量 num1
2 money += num1;
2 用户输入 “2” 取款
1 再弹出一个窗口 让用户来输入想要取款的数量 num2
money -+ num2;
3 用户输入 “3” 解决了
输出（3种输出方式）一个 金额
4 用户输入 “4” 结束了。。 解决了
*/
let input;
let money = 0; // 存款的金额 0
while (input !== 4) {
input = +prompt(`
1 存款
2 取款
3 查看余额
4 退出
`);
// 开始对用户的输入做判断
if (input === 1) {
let num1 = +prompt('请输入你想要存款的数量');
money += num1;
} else if (input === 2) {
let num2 = +prompt('请输入你想要取款的数量');
money -= num2;
} else if (input === 3) {
alert(money);
} else if (input === 4) {
console.log('开始退出了');
}
}
</script>
ATM总结加金额负数优化：
1 先要找出 循环的 条件 以及 循环要做的事情
2 根据用户的输入来编写对应的分支结构
3 再在对应的分支结构中 一个一个的去实现业务功能
<script>
/*
案例 做优化 无止境的
1 判断的输入是不是数字
2 判断的输入是不是合法的数字
3 。。。。。
*/
let input;
let money = 0;
while (input !== 4) {
input = +prompt(`
1 存款
2 取款
3 查看余额
4 退出
`);
if (input === 1) {
let num1 = +prompt('请输入你想要存款的数量');
money += num1;
} else if (input === 2) {
let num2 = +prompt('请输入你想要取款的数量');
// 先判断一下 存款减少了 会不会变成负数
// 不会 就正常去减少。
// 会 提示用户 不能取这么多钱
if (money - num2 < 0) {
// 负数了
alert('当前没有那么多余额，请重试');
} else {
// 正常
money -= num2;
}
} else if (input === 3) {
alert(money);
} else if (input === 4) {
console.log('开始退出了');
}
}
</script>
