回顾
分支： if单分支,if else 双分支 if else if 多分支
if(范围条件){}
switch分支
switch(变量){
case 1:
break; // 可以省略
case 2:
break;
default: //可以省略
break;
}
本章内容
循环的使用:
1.while(重点)
2.do..while(自己研究)
3.for (重点)
1.while循环
1.1.什么是循环
重复完成一项操作，重复做某一件事情
1.2.什么时候用循环
- 输出100次我能学会javascript
- 每天晚上给女朋友发短信
- 每个月收到通讯公司的缴费提醒
1.3.while循环语法：
语法:
// 固定次数的循环(输出100次我能学会javascript)
var 计数变量 = 0;
while(计数判断条件){
//实现功能的代码块
//计数变量的更新
}
固定次数循环四要素:
1. 计数变量 2.计数条件 3.功能代码块 4.计数变量更新
// 不定次数循环(吃包子)，如果条件一直成立则代码块会被一直执行，如果条件不成立则循环结束
while(条件){
//实现功能的代码块;
//终止条件执行的代码块
}
执行流程：
当while后面的条件成立的时候，循环中的代码会被一直执行，直到条件不成立，循环终止。
1.3.1 固定次数循环
a. 输出10次我能学好javascript
// 输出10次我能学好js
var i = 1;
while(i<=10){
document.write("第" +i+ "次:我能学好js<br/>");
i++;
}
document.write("<hr/>");
// 如何实现倒序输出
var j = 10;
while(j>=1){
document.write("第" +j+ "次:我能学好js<br/>");
j--;
}
b.正序输出1-100个数：1，2，3，4...10
// 输出1-100的数
// 计算变量
var i = 1;
while(i<=100){
document.write(i+"<br/>");
i++;
}
document.write("循环结束");c.倒序输出1-100个数: 100,99,98....1
//100,99,98, : 只要计数变量大于等1，那就要一直循环输出
// 如果计数变量小于1，则终止循环
var i = 100;
while(i>=1){
document.write(i+"<br/>");
// 更新计数变量
i--;
}d.输出1-100的偶数
// 什么是偶数: 2,4,6,8,10... 偶数的特征：能被2整除 代码: num%2==0
// var i = 1;
// while(i<=100){
// if(i%2==0){
// document.write(i+"<br/>");
// }
// i++;
// }
var i = 2;
while(i<=100){
document.write(i+"<br/>");
i+=2;
}e.输出1-100的奇数: 1,3,5,7,9 奇数：i%2==1
// 输出1-100奇数
var i = 1;
while(i<=100){
if(i%2==1){
document.write(i+"<br/>");
}
i++;
}
// 其它写法f.求1-10的和
1+2+3+4+5+6+7+8+9+10 = 55
要素:1. 首先要有1-10个数 2.这些数依次累加存储起来
//计数变量
var i = 1;
//累加和的变量
var sum = 0;
while(i<=10){
document.write(i+"<br/>");
// 将生成得数据累加到sum中
sum = sum + i;
// 计数更新
i++;
}
document.write("1-10和:"+sum);扩展: 输出1-100的和，输出1-100的奇数和，1-100的偶数和，1-100的3的倍数的和,100-200的和
// 定义计数变量
var i=1;
// 定义累加和的变量
var sum = 0;
while(i<=10){
if(i%2==0){
//document.write(i+"<br/>");
// 累加1-10中的偶数
sum = sum+i;
//alert(sum);
}
//变量更新
i++;
}
// 循环结束，输出结果
alert(sum);1.3.2 不定次数循环
a. 吃包子，每次吃一个，直到吃饱为止
// 不定次数循环: 吃包子，每次吃一个，询问一下，是否吃饱。直到吃饱为止
while(true){
document.write("吃一个包子<br/>");
var answer = prompt("请问吃饱没有","");
// 结束条件:吃饱为止
if(answer=="吃饱了"){
// 结束循环
break;
}
}
// 不定次数循环: 吃包子，每次吃一个，询问一下，是否吃饱。直到吃饱为止
// 统计吃包子的次数
var i = 0;
while(true){
document.write("吃一个包子<br/>");
// 吃完一个累加一次
i++;
var answer = prompt("请问吃饱没有","");
// 结束条件:吃饱为止
if(answer=="吃饱了"){
// 结束循环
break;
}
}
// 扩展: 统计吃了几个包子吃饱了
document.write("一共吃了:"+i+"个包子");2.do while 循环（自学）
语法格式
do{
代码块;
}while(条件表达式);
先执行再判断。
区别：do while 跟while 的区别
while:先判断再执行，如果条件不满足，可以一次都不执行。
do while :先执行再判断，就算是条件不满足，也会至少执行一次。
<script type="text/javascript">
var i = 1;
while(i<=10){
document.write(i+"<br/>");
i++;
}
document.write("<hr/>");
// 计数变量
var j = 1;
do{
document.write(j+"<br/>");
//计数变量更新
j++;
}while(j<=10);
</script>while和do..while的区别:
1.while先判断条件，再执行代码,do..while先执行一次，再判断条件
2.当条件不成立的时候，while的代码块一次都不执行，但是do..while至少执行一次
var i = 11;
// while: 先判断条件，再执行代码块
while(i<=10){
document.write(i+"<br/>");
i++;
}
document.write("<hr/>");
// 计数变量
var j = 11;
// 先执行一次代码块，再进行判断
do{
document.write(j+"<br/>");
//计数变量更新
j++;
}while(j<=10);
3.for 循环 (重点)
for循环主要用于固定次数循环: 1.计数变量 2.计数条件 3.功能代码块 4.计数变量更新
语法格式:
for(变量定义1;条件2;变量更新4){
//功能代码块3
}
// 变形写法
for( ; ; ){
}
循环四要素：
1.计数变量初始化 2.条件判断 3.功能代码块 4.计数变量更新
执行流程：
程序遇到for循环，开始进入循环模式，
第一次:
先执行"变量定义1",接着执行"条件2",条件成立，执行"功能代码块3",接着执行"变量更新4"
第二次:
在"计数变量更新4"执行之后，直接进行“条件2”的执行,注意"变量定义1"只在第一次执行，之后就不再执行。
如果"条件2"成立，则执行“功能代码块3”，如果"条件2"不成立，则for循环结束。后面的执行都按照这个次序进行。
第三次:...
第四次...
直到条件不成立，结束执行
3.1 for循环的使用
a. 输出100次我能学好javascript
// 使用for循环输出100次我能学会js
for(var i = 1 ; i<=100 ; i++ ){
document.write("第"+i+"次我能学会js<br/>");
}b.正序输出1-100个数
c.倒序输出1-100个数
d.输出1-100的偶数
e.输出1-100的奇数
f.求1-10的和
g.求100-200的和
// 输出100-200之间的数据，求和
var sum = 0;
for(var i=100;i<=200;i++){
document.write(i+"<br/>");
sum+=i;
}
document.write(sum);h.从1累加到10，求当累加的和大于20的时候，累加的那个数是几
var sum = 0;
for(var i=1;i<=10;i++){
//document.write(i+"<br/>");
sum+=i;
if(sum>20){
alert(i);
// 结束循环
break;
}
}i. 循环输入3个学生的成绩并求总分和平均分
分析: 1. 是一个有次数的循环,循环3次 2. 在循环过程中要进行分数的输入,prompt() 3.累加输入的分数
//循环输入3个学生的成绩并求总分和平均分
/*分析: 1. 是一个有次数的循环,循环3次
2. 在循环过程中要进行分数的输入,prompt()
3.累加输入的分数
*/
// 定义累加变量
var sum = 0;
for (var i = 1; i <=3 ; i++) {
// 输入分数,并转为整形
var score = Number(prompt("请输入第"+i+"个学生的分数:",""));
document.write("第"+i+"个同学的分数是:"+score+"<br/>");
sum += score;
}
// 输出三个学生的成绩和,平均分
document.write("总分:"+sum+" 平均分:"+(sum/3));
// 扩展: 如果输入分数有误，则中断循环，并且提示错误。不输出总分平均分。
4.循环控制关键字
4.1. break: 直接结束循环
4.2. continue: 跳过当前循环后面的代码不执行，直接进行下一次循环
//控制循环执行的关键字:break,continue
//break:当在循环的过程中，满足了某个条件，执行了break
// 会让循环直接终止
//continue:当在循环的过程中，满足了某个条件，执行了continue
// 那么本轮循环continue后面的代码不会被执行，直接进入下次循环
/*
for(var i=1;i<=10;i++){
//document.write(i+"<br/>"); //12345
if(i==5){
//退出循环
break;
}
document.write(i+"<br/>"); // 1234
}*/
for(var i=1;i<=10;i++){
//document.write(i+"<br/>"); //123456789 10
if(i==5){
//执行了continue，则本轮循环continue后面的代码会被跳过,
//直接进入下次循环
continue;
}
document.write(i+"<br/>"); //1234 678910
}//题目:循环输入3个学生的分数求总分平均分
//要求:1.如果所有的分数都是正常的(0-100)，则计算总分和平均分并输出
// 2.如果有任何一个分数输入错误，则终止循环，提示错误，并且不能输出总分和平均分
var sum = 0;
// 定义变量，来记录输入的过程中是否有误
var error = false;
for(var i=1;i<=3;i++){
// 输入分数
var score= Number(prompt("请输入第"+i+"个学生的分数:",""));
// 判断分数是否合法
if(score<0 || score>100){
error = true;
// 中断循环
break;
}
// 分数合法则累加分数
sum+=score;
}
//判断错误变量的状态
if(error==true){
document.write("分数输入有误，无法计算")
}else{
document.write("总分:"+sum+" 平均分:"+sum/3);
}
//统计80分以上的学生比例，用continue实现
//5个学生:90,76,89,23,45 2/5 = 40%
// 记录80分以上的人数
var count = 0;
for(var i=1;i<=5;i++){
var score = Number(prompt("请输入第"+i+"个学生的分数:",""));
//正向思维:大于80累加人数
/*if(score>=80){
//计数累加
count++;
}*/
//逆向思维:小于80不加人数
if(score<80){
continue;
}
count++;
}
document.write("80分以上的人数:"+count+" 所占比例:"+(count/5)*100+"%");5.循环嵌套
a. 输出2010-2020年的每一年的十二个月份
2010年 1月 2月 3月 4月...
2011年 1月 2月 3月 4月...
...
2020年 1月 2月 3月 4月...
// 外层输出年份
for (var i = 2010; i <=2020; i++) {
document.write(i+"年:");
/*document.write("1月 ");
document.write("2月 ");
document.write("3月 ");
document.write("4月 ");
document.write("5月 ");
document.write("6月 ");
document.write("7月 ");
document.write("8月 ");
document.write("9月 ");
document.write("10月 ");
document.write("11月 ");
document.write("12月 ");*/
// 内层循环输出12个月份
for(var j = 1;j<=12;j++ ){
document.write(j+"月 ");
}
document.write("<br/>");
}b. 输出5行5列的星星
// 外层循环控制行数
for(var i=1;i<=5;i++){
// 内层循环控制输出的内容
for(var j=1;j<=5;j++){
document.write("*");
}
document.write("<br/>");
}c. 输出三角形的星星
// 外层循环控制行数
for(var i=1;i<=5;i++){
// 内层循环控制输出的内容
// j跟随i进行变化
for(var j=1;j<=i;j++){
document.write("*");
}
document.write("<br/>");
}d.输出九九乘法表
// 外层循环控制行数
for(var i=1;i<=5;i++){
// 内层循环控制输出的内容
for(var j=1;j<=i;j++){
document.write(i+"*"+j+" ");
}
document.write("<br/>");
}总结
3种循环结构
while do while for
可以通过循环解决一些问题。
扫一扫
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
