JS入门到精通 第3章 流程控制
导读：一、练习1. 练习1 （1）源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>比较三个数的最大值</title> </head> &...
一、练习
1. 练习1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较三个数的最大值</title>
</head>
<body>
<script type="text/javascript">
var a,b,c,maxValue;//声明变量
a=10;//为变量赋值
b=20;//为变量赋值
c=30;//为变量赋值
maxValue=a;//假设a的值最大，定义a为最大值
if(maxValue<b){//如果最大值小于b
maxValue=b;//定义b为最大值
}
if(maxValue<c){//如果最大值小于c
maxValue=c;//定义c为最大值
}
alert(a+"、"+b+"、"+c+"三个数的最大值为"+maxValue);//输出结果
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_1/
（3）Tips
简单明了。
2. 练习2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>判断2010年2月份的天数</title>
</head>
<body>
<script type="text/javascript">
var year=2010;//定义变量
var month=0;//定义变量
if((year%4==0 && year%100!=0)||year%400==0){ //判断指定年是否为闰年
month=29;//为变量赋值
}else{
month=28;//为变量赋值
}
alert("2010年2月份的天数为"+month+"天");//输出结果
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_2/
（3）Tips
这不跟第二章一样。
3. 练习3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出考试成绩对应的等级</title>
</head>
<body>
<script type="text/javascript">
var grade = "";//定义表示等级的变量
var score = 85; //定义表示分数的变量score值为85
if(score>=90){ //如果分数大于等于90
grade = "优秀";//将"优秀"赋值给变量grade
}else if(score>=75){ //如果分数大于等于75
grade = "良好";//将"良好"赋值给变量grade
}else if(score>=60){ //如果分数大于等于60
grade = "及格";//将"及格"赋值给变量grade
}else{ //如果score的值不符合上述条件
grade = "不及格";//将"不及格"赋值给变量grade
}
alert("周星星的考试成绩"+grade);//输出考试成绩对应的等级
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_3/
（3）Tips
还在小学生水平，什么时候不如正轨。
4. 练习4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>判断某女职工是否已退休</title>
</head>
<body>
<script type="text/javascript">
var sex="女";//定义表示性别的变量
var age=58;//定义表示年龄的变量
if(sex=="女"){//如果是女职工就执行下面的内容
if(age>=55){//如果女职工在55岁以上
alert("该女职工已经退休"+(age-55)+"年");//输出字符串
}else{//如果女职工在55岁以下
alert("该女职工并未退休");//输出字符串
}
}else{//如果是男职工就执行下面的内容
if(age>=60){//如果男职工在60岁以上
alert("该男职工已经退休"+(age-60)+"年");//输出字符串
}else{//如果男职工在60岁以下
alert("该男职工并未退休");//输出字符串
}
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_4/
（3）Tips
不准打压女性，你们压不住了。
5. 练习5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支语句</title>
</head>
<body>
<script type="text/javascript">
var grade="";//定义表示奖项级别的变量
var prize="";//定义表示奖品的变量
var code=3;//定义表示中奖号码的变量值为3
switch(code){
case 1:
grade="一等奖";//定义奖项级别
prize="华为手机";//定义获得的奖品
break;//退出switch语句
case 2:
grade="二等奖";//定义奖项级别
prize="光波炉";//定义获得的奖品
break;//退出switch语句
case 3:
grade="三等奖";//定义奖项级别
prize="电饭煲";//定义获得的奖品
break;//退出switch语句
default:
grade="安慰奖";//定义奖项级别
prize="16G-U盘";//定义获得的奖品
break;//退出switch语句
}
document.write("该员工获得了"+grade+"<br>奖品是"+prize);//输出奖项级别和获得的奖品
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_5/
（3）Tips
太简单了。
6. 练习6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>while循环</title>
</head>
<body>
<script type="text/javascript">
var distance=400;//定义表示距离的变量
var count=0;//定义表示圈数的变量
while(distance<=5000){
count++;
distance=400*(count+1)
}
document.write("5000米比赛要跑完整的"+count+"圈");//输出最后的圈数
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_6/
（3）Tips
有缺陷。
7. 练习7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>do while循环</title>
</head>
<body>
<script type="text/javascript">
var i = 1;//声明变量并对变量初始化
var sum = 0;//声明变量并对变量初始化
do{
sum+=i;
i++;
}while(i<=100)
document.write("1+2+…+100="+sum);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_7/
（3）Tips
经典。
8. 练习8
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环</title>
</head>
<body>
<script type="text/javascript">
var i,sum;
sum = 0;//对变量初始化
for(i=1;i<100;i+=2){
sum+=i;
}
alert("100以内所有奇数的和为："+sum);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_8/
（3）Tips
多会能别过来。
9. 练习9
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环嵌套</title>
</head>
<body>
<h3>乘法口诀表</h3>
<script type="text/javascript">
var i,j;
document.write("<pre>");//输出<pre>标记
for(i=1;i<10;i++){ //i表示行
for(j=1;j<=i;j++){ //j表示列
document.write(i+"×"+j+"="+i*j);
document.write("\t");
}
document.write("<br>");
}
document.write("</pre>");//输出</pre>标记
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_9/
（3）Tips
我改良了。
10. 练习10
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环的跳出</title>
</head>
<body>
<hr width="500" size="5">
<center>万达影城7号厅</center>
<br><br>
<script type="text/javascript">
document.write("<table>");//输出表格标签
for(var i=1;i<=4;i++){
document.write("<tr height=70>");//输出表格行标签
for(var j=1;j<=10;j++){
if(i == 1 && j == 6){//如果当前是1排6座
document.write("<td width=80 background=yes.png>已售</td>");//将座位标记为“已售”
continue;//应用continue语句跳过本次循环
}
if(i == 3 && j == 9){//如果当前是3排9座
document.write("<td width=80 background=yes.png>已售</td>");//将座位标记为“已售”
continue;//应用continue语句跳过本次循环
}
document.write("<td width=80 background=no.png>"+i+"排"+j+"座"+"</td>");//输出排号和座位号
}
}
document.write("</table>");//输出表格结束标签
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_10/
（3）Tips
老是这么容易被挟持，何时才能转变过来。
二、编程训练
1. 训练1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较最小值</title>
</head>
<body>
<script type="text/javascript">
var a,b,c,d,minValue;//声明变量
a=16;//为变量赋值
b=12;//为变量赋值
c=9;//为变量赋值
d=15;//为变量赋值
minValue=a;
if(minValue>b){
minValue=b;
}
if(minValue>c){//如果最小值大于c
minValue=c;//定义c为最小值
}
if(minValue>d){//如果最小值大于d
minValue=d;//定义d为最小值
}
alert(a+"、"+b+"、"+c+"、"+d+"四个数的最小值为"+minValue);//输出结果
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_11/
（3）Tips
if要加括号。
2. 训练2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var api = 165;
var result = "";
if(api >=0 && api <=100){
result = "良好";
}else if(api >=101 && api <=200){
result = "轻度污染";
}else if(api >=201 && api <=300){
result = "中度污染";
}else if(api > 300){
result = "重度污染";
}
document.write("空气污染指数："+api);
document.write("<br>空气质量状况："+result);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_12/
（3）Tips
else if之间空格。
3. 训练3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>switch语句</title>
</head>
<body>
<script type="text/javascript">
var month=2;
switch(month){
case 1:
case 2:
case 3:
season="春季";
break;
case 4:
case 5:
case 6:
season="夏季";
break;
case 7:
case 8:
case 9:
season="秋季";
break;
default:
season="冬季";
break;
}
document.write("现在是"+month+"月");
document.write("<br>当前月份属于"+season);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_13/
（3）Tips
这种绕有啥意义？
4. 训练4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>do while循环</title>
</head>
<body>
<script type="text/javascript">
var base_wages=3000;
var year=0; //定义表示工作年数的变量
var age_wages=0;//定义表示工龄工资的变量
do{
year++;
age_wages=50*year;
document.write("员工工作"+year+"年后的工资为<b>"+(base_wages+age_wages)+"</b>元<br>");
}while(year<5);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_14/
（3）Tips
快上强度。
5. 训练5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环应用</title>
</head>
<body>
<script type="text/javascript">
var chicken=0;
var rabbit=0;
for(var i=1;i<=34;i++){
chicken=i;
rabbit=35-i;
document.write(chicken);
document.write("<br>");
document.write(rabbit);
document.write("<br>");
if(chicken*2+rabbit*4==94){
document.write("鸡有"+chicken+"只，兔有"+rabbit+"只");
}
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_15/
（3）Tips
都调试过了。
6. 训练6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环跳出</title>
</head>
<body>
<script type="text/javascript">
var i,sum;//声明变量
sum = 0;//对变量初始化
for (i=1;i<=1000;i++){
if(i%26==0){
sum+=i;
}
}
alert("1~1000以内所有26的倍数的和为："+sum);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_16/
（3）Tips
我更聪明。
7. 训练7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环跳出2</title>
</head>
<body>
<script type="text/javascript">
document.write("尚未使用的卡位：<p>");
for(var i=1;i<=3;i++){
for(var j=1; j<=3; j++){
if(i==1 && j==3){
continue;
}
if(i==3 && j==2){
continue;
}
document.write("第"+i+"排第"+j+"个 ");//输出结果
}
document.write("<br>");
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_17/
（3）Tips
好理解。
三、实践与练习
1. 实践1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>else if</title>
</head>
<body>
<script type="text/javascript">
var BMI = 23;
var result = "";
if(BMI < 20){
result = "体重过轻";
}else if(BMI >= 20 && BMI < 25){
result = "体重适中";
}else if(BMI >= 25 && BMI < 30){
result = "体重过重";
}else if(BMI >= 30 && BMI < 35){
result = "肥胖";
}else{
result = "非常肥胖";
}
document.write("BMI："+BMI);
document.write("<br>结果："+result);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_18/
（3）Tips
又简单。
2. 实践2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制作下拉框</title>
</head>
<body>
请选择您的出生年月：
<script type="text/javascript">
document.write("<select name='year'>");
for(var i=1980;i<2000;i++){
document.write("<option value='"+i+"'"+(i==1985?" selected":"")+">"+i+"年</option>")
}
document.write("</select> ");
document.write("<select name='month'>");
for(var i=1;i<=12;i++){
document.write("<option value='"+i+"'>"+i+"月</option>");
}
document.write("</select>");
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_19/
（3）Tips
还是简单。
3. 实践3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制表</title>
</head>
<body>
<table style="margin: 0 auto; border-collapse: collapse">
<script type="text/javascript">
var i = 0;
while(i<10){
document.write("<tr>");
var j = 1;
while(j<=10){
document.write("<td style='width:50px;text-align:center;border:1px solid'>"+(i*10+j)+"</td>");
j++;
}
document.write("</tr>");
i++;
}
</script>
</table>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/3_20/
（3）Tips
dreamveaver不灵光了。