流程控制
if 分支
-
单分支
if()
中的条件成立则执行{}
中的语句,否则不执行<script>if(条件){语句;} </script>
-
双分支
if()
中的条件成立则执行 if 后{}
中的语句,否则执行else{}
中的语句<script>if(条件){语句;}else{语句;} </script>
-
多分支
<script>if(条件){语句;}else if{语句;}else if{语句;}else if{语句;}else{语句;} </script>
switch 多分支
<script>
switch(变量名){case 值1:语句1;break;case 值2:语句2;break;case 值3:语句3;break;
}
</script>
如
<script>var day=1;switch(day){case 1:document.write("星期一");break;case 2:document.write("星期二");break;}
</script>
效果
while
-
while()
中的判断条件成立则一直执行{}
中的循环内容,直到()
中的条件不成立判断条件不要恒为真,否则会陷入死循环,所以需要让判断条件在恰当的时候,为假。
while(条件){循环体 }
如 循环输出 0-9
<script>var i = 0;while(i<10){document.write(i);i++;} </script>
效果
do while
-
无论循环的条件如何都会执行一次循环体
do{循环体 }while(条件)
首先进行一次循环体再进行判断
输出 0 - 10
<script>var i=0;do{console.log(i);i++;}while(i<=10) </script>
for
-
可嵌套
for(计数器;满足的条件;自增自减或其它操作){循环体 }
例
输出100以内的质数
<script>for(var i=2;i<=100;i++){var flag=0;for(var j=1;j<i;j++){for(k=1;k<i;k++){if(i==j*k){flag=1;break}}}if(flag==0){console.log(i);}} </script>
break
- 跳出循环 (break 所在的最小循环)
continue
- 跳过本次循环,直接进入下次循环
循环判断输入密码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>请输入密码<input type="password" id="pass"><input type="button" id="tijiao" value="提交" onclick="mima()">
</body>
<script>function mima(){while(true){var passwd=document.getElementById("pass").value;if(passwd==123){break;}else{mima();}}alert("正确")}
</script>
</html>
练习
1-10 间的偶数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>输出1-10间的偶数</title></head><body><script>for(var i=1;i<=10;i++){if(i%2==0){document.write(i);document.write("<br>");}}</script></body>
</html>
成绩定级
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>学生成绩定级</title></head><body><script>var score=prompt("请输入成绩")if(score>=90&&score<=100){document.write("A");}else if(score>=80&&score<90){document.write("B");}else if(score>=70&&score<80){document.write("C");}else if(score>=60&&score<70){document.write("D");}else if(score<60&&score>=0){document.write("Sorry!");}else{document.write("input error!");}</script></body></html>
九九乘法表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>九九乘法表</title></head><body><script>document.write("<table border=1>");for(var i=1;i<10;i++){document.write("<tr>");for(j=1;j<=i;j++){document.write("<td>");document.write(j,"*",i,"=",i*j);document.write("</td>");}document.write("</tr>");}document.write("</table>");</script></body>
</html>