循环结构的三种语法及案例

一.循环结构

1.循环的条件

循环的条件,循环变量,循环体

2.三种语法

①.while语法

下面一个demo,模拟10086人工客服服务,输入不同数字进行不同操作,输入0退出循环,显示谢谢使用

<script>
<span style="white-space:pre">	</span>var input=-1;
	while(input!=0){
	input=parseInt(prompt('请输入'));
	<span style="white-space:pre">	</span>switch(input){
			case 1:
				console.log('话费查询中');
				break;
			case 2:
				console.log('手机充值中');
				break;
			case 3:
				console.log('密码修改中');
				break;
			case 0:
				console.log('谢谢使用');
				break;
			default:
				console.log('无效按键');
		}	
	}
</script>

另外,最好的写法是这样的

<script>
	var input=-1;
	while((input=<span style="font-family: Arial, Helvetica, sans-serif;">parseInt(prompt('请输入')))</span>!=0){

<span style="white-space:pre">	</span>//<span style="font-family:Arial, Helvetica, sans-serif;">让用户输入,判断是不是!=0</span>
		switch(input){
			case 1:
				console.log('话费查询中');
				break;
			case 2:
				console.log('手机充值中');
				break;
			case 3:
				console.log('密码修改中');
				break;
			default:
				console.log('无效按键');
		}<span style="font-family: Arial, Helvetica, sans-serif;">	</span>

	}

<pre name="code" class="html" style="font-size:18px;">console.log('谢谢使用');

</script>

while循环可以在条件里写true,在循环体里手动使用break退出。

②do while语法:先执行循环体，再判断循环条件

var 循环变量=初始值;

do{

 循环体;

迭代修改循环变量;

}while(循环条件);

注意：while和do while 的区别：看第一次条件是否满足，如果第一次条件满足，两者完全相同，如果条件不满足，while一次也不执行，而do while至少执行一次。

③.for语法:

for(var 循环变量=初始值;循环条件;迭代修改循环变量){

循环体

}

下面这个demo是测试本金10000，年率率为3%，问多少年后本金加年率能超过20000：

<script>
      for(var m=1000,y=0;m<=1200;m*=1.03,y++);//m为本金
	console.log(y+'年后超过12000');
</script>

下面一个小的demo,用于验证用户输入的密码是否正确：

<script>
<span style="white-space:pre">	</span>var pwd="123456";
	var input="";
	while(input=prompt('请输入密码')!=pwd){
		alert('密码错误，请重新输入');
	}
	alert('验证成功');
</script>

下面这个demo是打印九九乘法表：

<script>
<span style="white-space:pre">	</span>for(var r=1;r<=9;r++){
	<span style="white-space:pre">	</span>for(var i=1,str="";i<=r;i++){
			str+=i+"X"+r+"="+i*r+' ';
		}
		console.log(str);
	}
</script>

下面这个demo打印三角形

<pre name="code" class="html"><script>

<span>	</span>for(var l=1;l<=6;l++){
		for (var r=1,str="";r<=l ;<span style="font-family: Arial, Helvetica, sans-serif;">str+="*",</span>r++ );
		console.log(str);
	}
</script>

效果如下：

下面这个demo打印倒三角：

分析：

<pre name="code" class="html"><script>

<span style="white-space:pre">	</span>var l=5;//总行数
	for (n=1;n<=l ;n++ ){
		for (var i=0,str="";i<l;i++){
		str+=i<l-n?" ":"*";
		}
		console.log(str);
	}
</script>

效果如下：