JavaScript demo4_流程控制

本文通过一系列JavaScript代码示例，包括demo1至demo2以及for循环和while循环的多个实例，详细阐述了JavaScript中的流程控制技巧和应用。

摘要由CSDN通过智能技术生成

流程控制

demo1.html
demo2.html
for3.html
for4.html
for5.html
while6.html

demo1.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<script type="text/javascript">
		// 条件语句
		if(3>11)
			document.write('hello ');
		document.write('world'); // world
		document.write('<hr color="red" />')
		/*
		if(true){
			document.write('hello ');
			document.write('bing'); // hello bing
			var x=1,y=2,username='bing';
		}
		document.write(x+'--'+y+'--'+username); // 1--2--king
		*/
		if(false){
			document.write('hello ');
			document.write('bing'); // hello bing
			var x=1,y=2,username='bing';
		}
		document.write(x+'--'+y+'--'+username); // undefined--undefined--undefined 

		//if...else
		document.write('<hr color="red" />');
		var username = 'bing';
		if(username == 'bing'){
			document.write('hello bing'); // hello bing
		}else{
			document.write('hello world');
		}
		document.write('<hr color="red" />');
		// if else if
		username = 'admin';
		if(username == 'bing'){
			document.write('hello bing'); // hello admin
		}else if(username == 'world'){
			document.write('hello world');
		}else if(username = 'admin'){
			document.write('hello admin');
		}
		document.write('<hr color="red" />');
		if(false){
			document.write('a');
		}else if(3>12){
			document.write('b');
		}
		document.write('<hr color="red" />');
		var x = 11;
		if(x==1){
			document.write('aaa');
		}else if(x==2){
			document.write('bbb');
		}else if(x==3){
			document.write('ccc');
		}else{
			document.write('以上表达式都为false执行的代码段'); // 以上表达式都为false执行的代码段
		}
		document.write('<hr color="aqua" />');

		// switch...case语句
		/*
		switch(exp){
			case 值1:
				执行的代码段;
				break;
			case 值2:
				执行的代码段;
				break;
			...
			default:
				执行代码段;
				break;

			严格类型比较
		}
		*/
		var i = 1;
		var i = true;
		switch(i){
			case '1':
				document.write('bing');
				break;
			case 1:
				document.write('aa');
				break;
			case 2:
				document.write('bb');
				break;
			default:
				document.write('以上case都没有匹配到的时候执行的代码段');
			case 3:
				document.write('cc');
				break;
			case 4:
				document.write('dd');
				break;
		}
		document.write('<br/>continue...');
		document.write('<hr color="red" />');
		i = 14;
		switch(i){
			case 1:
				document.write('a');
			case 2:
				document.write('b');
			default:
				document.write('e'); // e
			case 3:
				document.write('c'); // c
				break;
			case 4:
				document.write('d');
		}
		document.write('<hr color="red" />');
		var i = 9;
		switch(i){
			case 1:
			case 2:
			case 3:
				document.write('hello bing');
				break;
			case 4:
			case 5:
			case 6:
				document.write('hello world');
				break;
			default:
				document.write('hello everybody'); // hello everbody
				break;
		}
	</script>
</body>
</html>

在这里插入图片描述

demo2.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<script type="text/javascript">
		var username = 'bing', age = 18, sex='女';
		if(3>1){
			document.write('aa<br/>');
			if(username == 'bing'){
				document.write('hello bing<br/>');
				if(age >= 18){
					document.write('成年人<br/>');
					if(sex = '女'){
						document.write('美女');
					}else {
						document.write('帅哥');
					}
				}else {
					document.write('未成年人');
				}
			}else {
				document.write('hello other<br/>');
			}
		}else{
			document.write('bb<br/>');
		}
	</script>
</body>
</html>

在这里插入图片描述

for3.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		/*
		for(exp1;exp2;exp3){
			循环体;
		}
		exp1:无条件的执行第一个表达式
		exp2:是判断是否能执行循环体的条件
		exp3:做增量的操作
		*/
		// document.write('hello bing<br/>');
		// document.write('hello bing<br/>');
		// document.write('hello bing<br/>');
		// document.write('hello bing<br/>');
		// document.write('hello bing<br/>');
		for(var i = 1;i<=10;++i){
			document.write('hello bing<br/>');
		}
		document.write(i); // 11
		document.write('<hr/>');
		// 循环输出0~100
		for(var i = 0;i<=100;i++){
			document.write(i + '<br/>');
		}
		document.write('<hr color="red" />');
		// 循环输出100~0
		for(var i = 100;i>=0;i--){
			document.write(i + '<br/>');
		}
		document.write('<hr color="red" />');
		// 循环输出1~100之间的奇数
		for(var i=1;i<=100;i+=2){
			document.write(i + '<br/>');
		}
		document.write('<hr color="aque" />');
		for(var i = 1;i<=100;++i){
			if(i%2==1){
				document.write(i+'<br/>');
			}
		}
		document.write('<hr color="red" />');

		// 循环输出1~100之间数字的和
		var sum = 0;
		for(var i = 1;i<=100;i++){
			sum += i;
		}
		document.write(sum + '<br/>'); // 5050
		document.write('<hr color="red" />');
		/*
			通过break结束for循环
		*/
		for(var i = 1;i>=0;++i){
			if(i>100){
				break; // 结束for循环
			}
			document.write(i + '<br/>');
		}
		document.write('<hr color="red" />');
		/*
			continue:代表跳过当次循环，进入下次循环
		*/
		for(var i = 1;i <= 10;i++){
			if(i==3){
				// break;
				continue;
				document.write('hello world');
			}
			document.write(i + '<br/>'); // 1 2 4 5 6 7 8 9 10
		}
	</script>
</head>
<body>

</body>
</html>

for4.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		for(var i = 1;i<=3;i++){
			document.write('外层循环循环第'+i+'次的结果<br/>');
			for(var j = 1; j <= 2;j++){
				document.write('内层循环循环第'+i+'次的结果<br/>');
			}
			document.write('<hr/>');
		}
	</script>

	<table border="1" cellpadding="0" cellspacing="0" bgcolor="aqua" width="50%">
		<script type="text/javascript">
			for(var i = 1;i<=3;i++){
				document.write('<tr>');
				for(var j = 1; j<=3;j++){
					document.write('<td>x</td>');
				}
				document.write('</tr>');
			}
		</script>
	</table>

	<script type="text/javascript">
		document.write('<hr color="red">');
		document.write('<table border="1" cellpadding="0" cellspacing="0" bgcolor="aqua" width="50%">');
			for(var i = 1;i<=9;i++){
				document.write('<tr>');
					for(var j = 1;j<=i;j++){
						document.write('<td>'+i+'x'+ j + '=' +(i*j) +'</td>');
					}
				document.write('</tr>');
			}
		document.write('</table>');
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述

for5.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		// 求1~100之间奇数的和
		var sum = 0;
		for(var i = 1;i<=100;i+=2){
			sum += i;
		}
		document.write('1-100之间奇数的和为：'+sum + '<br/>'); // 2500
		// 求1~100之间偶数的和
		var sum = 0;
		for(var i = 1;i<=100;i++){
			if(i%2==0){
				sum += i;
			}
		}
		document.write('1-100之间偶数的和为：'+sum + '<br/>'); // 2550

		// 输出倒置99乘法表
		document.write('<table border="1" cellpadding="0" cellspacing="0" bgcolor="aqua" width="50%">');
			for(var i = 9;i>=1;i--){
				document.write('<tr>');
					for(var j = 1;j<=i;j++){
						document.write('<td>'+i+'x'+ j + '=' +(i*j) +'</td>');
					}
				document.write('</tr>');
			}
		document.write('</table>');
		// 通过for循环实现百钱买百鸡的题
		// 公鸡5元每只，母鸡3元每只，小鸡3只1元，100元可以买100只鸡
		for(var i = 0;i<=20;i++){
			for(var j = 0;j<=33;j++){
				for(var z = 0;z<=100;z++){
					if((i+j+z == 100) && (5*i + 3*j + z/3 == 100)){
						document.write('公鸡：' + i + '母鸡'+ j + '小鸡' + z + '<hr/>');
					} 
				}
			}
		}
		document.write('<br color = "red"/>');
		for(var i = 0;i<=20;i++){
			for(var j = 0;j<=33;j++){
				z = 100 - i - j;
				if((z%3==0)&&(5*i+3*j+z/3==100)){
					document.write('公鸡：' + i + '母鸡'+ j + '小鸡' + z + '<hr/>');
				}
			}
		}
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述

while6.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		/*
			 while(exp){
			 	循环体;
			 }

			 do{
			 	循环体;
			 }while(exp);
		 */
		 var i = 1;
		 while(i<=10){
		 	document.write(i);
		 	document.write('<br/>');
		 	i++;
		 }
		 document.write(i);
		 document.write('<hr/>');
		 while(false){
		 	document.write('hello bing');
		 }
		 document.write('<br/>continue...<br/>');
		 do{
		 	document.write('hello world');
		 }while(false);
		 document.write('<hr/>');

		 // break:可以结束while和do...while
		 i = 1;
		 while(i>=0){
		 	if(i>=10){
		 		break;
		 	}
		 	document.write(i);
		 	document.write('<br/>');
		 	i++;
		 }
		 document.write('<hr/>');

		 // 通过continue跳过当次循环
		 i = 1;
		 while(i<=10){
		 	if(i==3){
		 		// break;
		 		i++;
		 		continue;
		 	}
		 	document.write(i+'<br/>');
		 	i++;
		 }
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述