JavaScript-4

最新推荐文章于 2023-08-06 09:29:59 发布

yji534123343

最新推荐文章于 2023-08-06 09:29:59 发布

阅读量151

点赞数

分类专栏： Web前端笔记 JavaScript 文章标签：前端笔记 JavaScript

本文链接：https://blog.csdn.net/yji534123343/article/details/79203334

版权

Web前端笔记同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

JavaScript

20 篇文章 0 订阅

订阅专栏

1、分支结构
2、循环结构
=============================
1、分支结构
1、else...if语句(多重if结构)
1、问题
根据考试成绩，给出 A-E 等级
成绩为100分，则输出A
成绩在90分以上则输出B
成绩在80分以上则输出C
成绩在60分以上则输出D

否则输出E

<!doctype html>
<html>
	<head>
		<title>标题</title>
		<meta charset="utf-8">
	</head>
	<body>
		<script>
			function getScore(){
				/*1、输入一个考试成绩*/
				var score = prompt("请输入一个考试成绩:");
				/*2、根据成绩判断所在的区间范围并提示A-E的等级*/
				/*if(score == 100){
					console.log("A");
				}else{
					if(score>=90){
						console.log("B");
					}else{
						if(score >= 80){
							console.log("C");
						}else{
							if(score >= 60){
								console.log("D");
							}else{
								console.log("E");
							}
						}
					}
				}*/

				if(score==100){
					console.log("A");
				}else if(score >= 90){
					console.log("B");
				}else if(score >= 80){
					console.log("C");
				}else if(score >= 60){
					console.log("D");
				}else{
					console.log("E");
				}
			}
		</script>
		<button οnclick="getScore();">测试考试成绩</button>
	</body>
</html>

2、语法
if(条件1){
语句块1;
}else if(条件2){
语句块2;
}else if(条件3){
语句块3;
}... ...else{
语句块n;
以上条件都不满足时，才运行else
}
注意：else是可有可无的。
3、练习
要求用户通过弹框输入年，输入月，输入日，判断该日是这一年的第多少天?
输入年：2016
输入月：10
输入日：27
2016年10月27日是2016年的第301天
1月：31
2月：闰年 29天,(如果平年则 28天)
3月：31天
4月：30
5月：31
6月：30
7月：31
8月：31

9月：30

<!doctype html>
<html>
	<head>
		<title>标题</title>
		<meta charset="utf-8">
	</head>
	<body>
		<script>
			function getTotalDays(){
				var year=Number(prompt("输入年："));
				var month=Number(prompt("输入月："));
				var day=Number(prompt("输入日："));
				var totalDays=0;//记录总天数

				if(month == 1){
					totalDays = day;
				}else if(month == 2){
					totalDays = 31 + day;
				}else if(month == 3){
					totalDays = 31+28+day;
				}else if(month == 4){
					totalDays = 31+28+31+day;
				}else if(month == 5){
					totalDays = 31+28+31+30+day;
				}else if(month == 6){
					totalDays = 31+28+31+30+31+day;
				}else if(month == 7){
					totalDays = 31+28+31+30+31+30+day;
				}else if(month == 8){
					totalDays = 31+28+31+30+31+30+31+day;
				}else if(month == 9){
					totalDays = 31+28+31+30+31+30+31+31+day;
				}else if(month == 10){
					totalDays = 31+28+31+30+31+30+31+31+30+day;
				}else if(month == 11){
					totalDays = 31+28+31+30+31+30+31+31+30+31+day;
				}else if(month == 12){
					totalDays = 31+28+31+30+31+30+31+31+30+31+30+day;
				}


				//当不是1月和2月的时候，再执行以下操作
				//判断是否为闰年，如果为闰年的话，则 + 1 天
				if(month!=1 && month!=2){
					if(year%4==0&&year%100!=0||year%400==0){
						totalDays+=1;
					}
				}
				console.log(year+"年"+month+"月"+day+"日是"+year+"年的第"+totalDays+"天");
			}
		</script>
		<button οnclick="getTotalDays();">获取总天数</button>
	</body>
</html>

2、switch-case 结构
1、作用
为了简化等值判断的条件判断结构
2、语法
switch(变量/表达式){
case 值1:
语句块1;
break; //该语句块的结束
case 值2:
语句块2;
break; //表示结束，可以不写
... ...
default:
语句块n;
break;
}
1、执行流程
1、解析表达式或变量中的值
2、用解析出的数值与 case 后的数值进行等值比较
如果比较成功，则执行该case后的语句块
3、执行完成后，如果碰到 break则结束整个switch结构，否则继续向下执行(非判断)
3、switch-直落形式
两块或多块case之间，没有任何操作代码，表示多块case要执行相同的操作
switch(变量/表达式){
case 值1:
case 值2:
case 值3:
语句块;
break;

}

<!doctype html>
<html>
	<head>
		<title>标题</title>
		<meta charset="utf-8">
	</head>
	<body>
		<script>
			/*1、取款，转账，查询，退出，维护函数*/
			function getMoney(){
				alert("取款进行中，请稍后...");
			}
			function transfer(){
				alert("转账进行中，请稍后...");
			}
			function query(){
				alert("查询进行中，请稍后...");
			}
			function exit(){
				alert("欢迎使用!拜拜!");
			}
			function weiHu(){
				alert("系统维护中...");
			}

			function userError(){
				alert("您的操作有误...");
			}

			/*2、菜单选择：根据用户传递进来的数据调不同的函数*/
			function menu(choice){
				switch(choice){
					case 1:
						query();
						break;
					case 2:
						getMoney();
						break;
					case 3:
						transfer();
						break;
					case 0:
						exit();
						break;
					default:
						userError();
						break;
				}
			}

			/*3、欢迎函数：显示菜单，并让用户输入数据*/
			function welcome(){
				var menu1 = "====欢迎使用电话银行系统====\n查询请按1\n取款请按2\n转账请按3\n退出请按0";
				var choice = Number(prompt(menu1));
				//调用 menu 函数
				menu(choice);
			}

			function calDate(){
				var year = Number(prompt("Year:"));
				var month = Number(prompt("Month:"));
				var day = Number(prompt("Day:"));
				totalDays = 0;
				switch(month-1){
					case 11:
						totalDays += 30;
					case 10:
						totalDays += 31;
					case 9:
						totalDays +=30;
					case 8:
						totalDays += 31;
					case 7:
						totalDays += 31;
					case 6:
						totalDays += 30;
					case 5:
						totalDays += 31;
					case 4:
						totalDays += 30;
					case 3:
						totalDays += 31;
					case 2:
						totalDays += 28;
						if(year%4==0&&year%100!=0||year%400==0){
							totalDays+=1;
						}
					case 1:
						totalDays += 31;
				}

				totalDays += day;
				console.log(totalDays);
			}
		</script>	
		<button οnclick="welcome()">电话银行系统</button>
		<button οnclick="calDate()">日期计算器</button>
	</body>
</html>

2、循环结构

1、什么是循环结构
循环：一遍又一遍的重复执行相同或相似的代码
生活中的循环：
1、循环听歌：有开始，有结束
2、上学：有开始，右结束
3、长跑运动员：有开始，有结束
循环特点：
1、循环条件
规定了循环的执行次数
2、循环操作
要执行相同或相似的语句-循环中做了什么
2、循环结构-while循环
1、语法
while(条件){
//循环操作
}

流程：
1、判断循环条件
2、如果条件为真，则执行循环操作，然后再判断条件，如果条件为真，则继续执行循环操作... ...
3、直到条件为假时，则结束循环操作
练习1：
1、打印 1-1000之间所有的数字
2、计算 1-1000之间所有的数字之和

3、计算 1-1000之间所有奇数数字之和

<!doctype html>
<html>
	<head>
		<title>标题</title>
		<meta charset="utf-8">
	</head>
	<body>
		<script>
			/*打印 1-1000 之间所有的数字*/
			function fun1(){
				/*循环条件：从第1遍开始 到 第1000遍结束*/
				var i=1;
				/*循环操作：将 循环条件变量 打印输出，更新循环变量*/
				while(i<=1000){
					console.log(i);
					i++;
				}
			}
			
			/*计算 1-1000之间所有数字的和*/
			function fun2(){
				/*循环条件：从第1遍开始，到第1000遍结束*/
				/*循环操作：将 循环条件值 进行累加，更新循环变量 */
				var i=1;
				var sum=0;//用于累加1-1000之和的变量
				while(i<=1000){
					sum=sum+i;
					i++;
				}
				console.log(sum);
			}

			/*3、累加 1-1000之间 所有奇数的和*/
			function fun3(){
				/*条件：从1开始 到 1000结束*/
				/*操作：判断 循环条件是否为 奇数，如果是奇数 则累加*/
				var i=1;
				var sum=0;
				//方案1
				/*while(i<=1000){
					//判断 i 的奇偶性
					if(i % 2 == 1){
						sum+=i;
					}
					i++;
				}*/
				//方案2 ：让i一直以奇数方式变化
				while(i<=1000){
					sum+=i;
					i=i+2;
				}
				console.log(sum);
			}
		</script>
		<button οnclick="fun1()">打印1-1000之间所有的数字</button>
		<button οnclick="fun2()">打印1-1000之间所有数字的和</button>
		<button οnclick="fun3()">打印1-1000之间所有奇数的和</button>
	</body>
</html>

2、循环流程控制语句
1、continue
终止本次循环的执行，继续下次循环

2、break
提前退出循环结构

4、循环结构-do...while()循环
1、语法
do{
//循环操作
}while(条件);

流程：
1、先执行循环操作
2、判断循环条件
如果值为真，则继续执行循环操作
如果值为假，则退出循环
场合：
先执行循环体，根据循环体内的操作再决定循环条件时，使用do...while
2、while 与 do...while 的区别
1、while ：先判断，后执行，最少一次都不执行循环操作
2、do...while : 先执行，后判断，最少执行一次循环操作
3、练习
猴子吃桃问题
猴子摘下了若干个桃子，当即吃了一半，还不过瘾，又多吃了一个，第二天，又将剩下的桃子吃了一半，又多吃一个。以后每天都吃了前一天剩下的一半零一个。到第10天的时候，发现只剩下一个桃子。求：第一天共摘下多少个桃子。

<!doctype html>
<html>
	<head>
		<title>标题</title>
		<meta charset="utf-8">
	</head>
	<body>
		<script>
			function monkey(){
				/*1、计数器(从10开始，到2结束)*/
				var i=10;
				/*2、每天剩余量 :left,前一天总量：total*/
				var left=1,total;

				/*循环：
					1、条件：到第2天结束
					2、操作：
						通过 left 计算 total
						再将 total 赋值 给left
				*/
				while(i>1){
					total=(left+1)*2;
					left=total;
					i--;
				}
				console.log("猴子第一天共摘了"+total+"个桃子");
			}

			function peach(){
				var i=10;
				/*第一天剩余多少个桃子*/
				var total=1;
				while(i>1){
					total=(total+1)*2;
					i--;
				}
				console.log(total);
			}
		</script>
		<button οnclick="peach();">猴子摘桃</button>
	</body>
</html>