1.while循环
<script>
while (循环条件) {
要重复执行的代码(循环体)
}
</script>
1while循环
<script>
// 1.变量的值
let i = 1
// 2.循环条件 终止循环结束
while (i <= 5) {
//循环体
console.log(`这代码会执行第${i} `);
// 变量需要改变 结束循环的条件
i++
}
</script>
2.while循环练习
<script>
// 初始值
let a = 1,
// 让用户自己输入多少行
i = prompt ('请输入几行')
// 循环条件 满足条件 就执行
while (a <= i) {
document.write(`<p>月薪过万${a}</p>`)
// 变量需要改变 结束循环的条件
a++
}
</script>
3.while循环案例
<script>
// 让用户 赋值
let num = +prompt('请您输入数字'),
i = 10,
son = 0
// 循环条件 满足条件 就执行
while (i <= num) {
// 循环体
document.write(`${i}<br>`)
// 修改变量 结束循环
i++
}
</script>
4.案例1-100的总和
<script>
// 单独定义一个 变量 总和 som
// som = 0
// 循环的时候
// sum = sum + i
let i = 1
let sum = 0;
while (i <= 100) {
// 手法熟练后就可以这样子写了
sum += i++
// 分析
// sum += 1 // sum = sum + 1
// sum = sum + i++
// sum = sum + i
// i++
}
console.log('你要的偶数总和', sum);
</script>
5.while循环计算1-100偶数总和
<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,
sum = 0
while (i <= 100) {
// 这一行代码不能直接执行 满足某些条件才执行
if (i % 2 === 0) {
sum += i;
// 无论当前的i是偶数还是奇数 i++都要执行 必须进行下一轮的循环
}
i++
}
console.log('你要的1-100的偶数和',sum);
</script>
6.案例之流氓框的案例
<script>
// 1.定义 初始变量
let str;
// 2.判断的条件 (满足什么条件 就不会 执行循环)
while (str !== '吃了') {
// 弹窗
str = prompt('说你吃饭了')
}
// 变量的初始值 变量判断循环条件 变量需要被修改
</script>
7.简易ATM取款机-用户输入数字功能-执行对应的功能
1.先要找出 循环的 条件 以及 循环要做的事情
2.根据用户的输入来编写对应的分支结构
3.再在对应的分支结构中 一个一个的去实现业务的功能
<script>
/* 需求:
1 打开页面的时候 弹出一个对话框
显示以下内容
1 取款
2 存款
3 查看余额
4 退出
2 用户就需要输入一些信息
1 用户输入 “1”
还会继续弹出窗口 又问一遍 以上 1 的内容
2 用户输入 “2”
还会继续弹出窗口 又问一遍 以上 1 的内容
3 用户输入 “3”
还会继续弹出窗口 又问一遍 以上 1 的内容
4 用户输入 “4” 结束了。。 */
/* 分析:
1 只要用户输入的 不是4 都弹窗 否则就不弹窗 (回顾 上午讲 爱我爱我 (只要用户输入的不是爱 就一直弹窗) */
let input;
// 定义一个 存款的金额
money = 0;
while (input !== 4) {
input = +prompt(`
1.存款
2.取款
3.查看余额
4.退出
`)
// 开始对用户的输入做出判断
if (input === 1) {
let num1 = +prompt('请出入您要的存款数量')
alert(`存款成功 卡剩余额为 ${money += num1}元`)
} else if (input === 2) {
let num2 = +prompt('请您输入你要的取款数量')
alert(`取款成功: ${money -= num2}卡剩余额为${money}元`)
} else if (input === 3) {
alert(money)
} else if (input === 4) {
alert('退出成功,感谢你下次光临')
}
else {
alert('您好:您输入数据有误,请您重新输入')
}
}
</script>
8.数量修改
<script>
let money =10;
// document.write (money = money + 10);//加10
// document.write (money += 10);//加10
document .write(money = money - 0)
document .write(money -= 0)
</script>
2.for循环
<script>
for (声明纪录循环次数的变量; 循环条件; 变量值) {
循环体
}
for (let i = 1; i <= 100; i++) {
console.log(i);
}
</script>
1.for循环初体验
<script>
/* 1 先执行 let i = 1;
2 再去执行 i<=100的判断
3 执行 console.log(i)
4 再去执行 i++;
5 去执行判断 i<=100
6 又去执行 console.log(i)
7 再去执行 i++
8 又去执行 i<=100
9 又去执行 console.log(i)
10 i++ */
for (let i = 1; i < 100; i++) {
document.write(`${i} <br>`)
}
</script>
2.求1-100之间所有的偶数
<script>
let sum = 0
for (let i = 1; i <= 100; i++) {
// 左边满足条件了等于 true 才去执行右边的 代码
(i % 2 === 0) && (sum += i);
}
console.log(sum)
3.用for循环做出五百个星星
<script>
let star = '';
for (let i = 0; i < 500; i++) {
star += 'xingxing';
}
console.log(`${star}`);
</script>
4.案例三天背五个单词
<script>
// 执行背多少天
for (let i = 1; i <= 3; i++) {
document.write(`第${i}天<br> `)
//执行一天要背多少个单词
for (let b = 1; b < 5; b++) {
document.write(`背了${b}个单词<br>`)
}
}
</script>
5.N天背N个单词
<script>
// 用户输入
let num1 = +prompt('请输入天数'),
num2 = +prompt('请输入背单词的个数')
// 执行要背多少天
for (let index = 1; index <= num1; index++) {
document.write(`第${index}天<br>`)
// 执行要背多少个单词
for (let index = 1; index <= num2; index++) {
document.write(`背了${index}单词<br>`)
}
}</script>
6.continue和break
<script>
/*
for
控制循环结束
1 continue 跳过本次循环 继续开启下次循环 (不是必须)
continue 想要跳过这个循环 不一定通过它
我们自己 if else 也能实现类似的功能
2 break 直接 循环结束 不玩了
也不是必须 , 我们也是可以通过 if-else 来实现它的功能
但是如果可以 使用break的话 尽量使用它 (性能更加好) 因为break会终止剩下的循环
如果当前的index 是一个奇数 下面的代码就不要再运行了 开启下一个循环
*/
// 只显示 奇数 单数
// for (let index = 1; index <= 10; index++) {
// // 判断当前的index是不是奇数
// if (index % 2 !== 0) {
// // console.log(index);
// continue;
// }
// console.log(index,"⭐");
// }
// 只显示 奇数 单数
// for (let index = 1; index <= 10; index++) {
// // 判断当前的index是不是奇数
// if (index % 2 !== 0) {
// // 奇数
// }else{
// // 偶数
// console.log(index,"⭐");
// }
// }
/*
continute 功能 其实 也是可以通过 if else 来模拟和实现
if else 根据条件来执行某段代码
continute 跳过循环(不想执行某段代码)
*/
// 只输出偶数
// for (let index = 1; index <= 10; index++) {
// if (index % 2 === 0) {
// // 是偶数了才输出
// console.log(index);
// }
// }
// for (let index = 1; index <= 10; index++) {
// if (index % 2 !== 0) {
// // 是奇数的话 就跳过这次循环
// continue
// }
// console.log(index);
// }
for (let index = 1; index <= 10; index++) {
// 如果当前的index = 5 ,就不再往下 循环了,就终止循环
if (index === 5) {
break;
}
// // index===5&&break // 不能简写 报错!!
console.log(index);
// if (index < 5) {
// console.log(index);
// }
console.log("代码调用的次数", index);
}
</script>