一、引言
本文主要是利用一个例子，讲一下原生js中常用的四种循环方式的使用与区别：
实现效果：
- 在网页中弹出框输入0 网页输出“欢迎下次光临”
- 在网页中弹出框输入1 网页输出“查询中……”
- 在网页中弹出框输入2 网页输出“取款中……”
- 在网页中弹出框输入3 网页输出“转账进行中……”
- 在网页中弹出框输入其他字符 网页输出“无效按键”
四种循环：
- for循环
- while循环
- for in 循环
- for of 循环
二、for循环
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>for 循环</title>
</head>
<body>
<script>
var input=parseInt(prompt("请按键:"));
for(var i=input;i!=0;i++){
if(i==1){
document.write("查询中...");
break;
}else if(i==2){
document.write("取款中...");
break;
}else if(i==3){
document.write("转账进行中...");
break;
}else{
document.write("无效按键");
}
break;
}
if(input==0){
document.write("欢迎下次光临！");
}
</script>
</body>
</html>
三、while循环
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>while 循环</title>
</head>
<body>
<script>
var input=-1;
while((input=parseInt(prompt("请按键")))!=0){
if(input==1){
document.write("查询中...");
break;
}else if(input==2){
document.write("取款中...");
break;
}else if(input==3){
document.write("转账进行中...");
break;
}else{
document.write("无效按键");
}
break;
}
if(input==0){
document.write("欢迎下次光临！");
}
</script>
</body>
</html>
四、for in 循环
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>for in 循环</title>
</head>
<body>
<script>
var input=parseInt(prompt("请按键:"));
var array=new Array();
array.push(input);
for(var key in array){
if(array[key]==0){
document.write("欢迎下次光临！");
}else if(array[key]==1){
document.write("查询中...");
break;
}else if(array[key]==2){
document.write("取款中...");
break;
}else if(array[key]==3){
document.write("转账进行中...");
break;
}else{
document.write("无效按键");
}
break;
}
</script>
</body>
</html>
五、for of循环
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>for of循环</title>
</head>
<body>
<script>
var input=parseInt(prompt("请按键:"));
var array=new Array();
array.push(input);
for(var val of array){
if(val==0){
document.write("欢迎下次光临！");
}else if(val==1){
document.write("查询中...");
break;
}else if(val==2){
document.write("取款中...");
break;
}else if(val==3){
document.write("转账进行中...");
break;
}else{
document.write("无效按键");
}
break;
}
</script>
</body>
</html>