4、JS的基础学习——04day

最新推荐文章于 2024-08-30 20:29:15 发布

小周日记

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量91

点赞数

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/actores/article/details/115254536

版权

JavaScript学习专栏收录该内容

22 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的for循环使用，包括基本概念、语法结构和常见练习，如奇数和的计算、质数判断、水仙花数的寻找以及99乘法表的实现。此外，还展示了不同类型的循环嵌套，用于生成不同图形，如正三角形和倒三角形。通过这些实例，深入理解for循环的执行流程和逻辑控制。

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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

1.for循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 循环的三要素：
			 * 		1.初始化表达式
			 * 		var i = 0;
			 * 		2.创建一个循环，定义条件表达式
			 * 		while(i < 10){
			 * 		3.设置更新表达式 i++
			 * 			alert(i++);
			 * 		}
			 * 
			  for语句，也是一个循环语句，也称为for循环
			 * 		在for循环中，为我们提供了专门的位置来放
			 * 			1.初始化表达式
			 * 			2.条件表达式
			 * 			3.更新表达式
			 * 		for循环的语法：
			 * 			for(①初始化表达式;②条件表达式;更新表达式){
			 * 			③语句....
			 * 			}
			 * 			
			 * 			for循环的执行流程:
			 * 				①执行初始化表达式，初始化变量（只执行一次）
			 * 				②执行条件表达式，判断是否执行循环
			 * 						如果为true，则执行循环③
			 * 						如果为flase，则结束循环
			 * 				④执行更新表达式，更新表达式完毕之后继续重复②，直到循环结束
			 * 
			 * 
			 */
			/*举例*/
			for(var i = 0;i < 10;i++)
			{
				alert(i);
			}
			
			/*举例可以省略的 和上面的while循环一模一样了：*/
			/*var i = 0;
			for (;i<10;) {
				alert(i++);
			}
			*/
			/*举例：
			 	  for循环中的三个部分都可以省略，也可以写在外面
			 	  	如果在for循环中不写任何表达式，只写两个;
			 * 		此时循环是一个死循环会一直执行下去，慎用
			 * */
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

2.for循环练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			/*例题一：打印1-100之间的所有奇数之和*/
			
			
			/*//让一个变量存放值，一定要初始化
			var sum = 0;
			//1.先历遍1-100
			for(var i = 1; i<=100; i++)
			{
				//2.判断输出奇数
				if (i%2!=0) {
					//一直让i往sum里面加，求和
					sum = sum + i;
					
				}
			}
			document.write("奇数之和是="+sum);*/
			
			//例题二：打印1-100之间所有的7的倍数个数及总和
			//1.历遍1-100
			//2.从1-100找到7的倍数
			//3.求一共有多少个7的倍数
			//4.求这些倍数的总和
			/*var sum=0;
			var conunt=0;
			for(var i=1;i<=100;i++){
				if(i%7==0){
					conunt++;
					sum = sum+i;
				}
				
			}
			document.write("1-100中7的倍数有："+conunt+"个\n");
			document.write("1-100中7的倍数的总和有："+sum);*/
			//例题三：打印3位数的水仙花数
			//1.历遍所有的三位数
			//2.找出这三个数，获取 个 十 百
			//3.历遍水仙花数
			/*var ge,shi,bai;
			
			for(var i = 100;i<1000;i++)
			{
				//parseInt(shi) = i/100;错的，操作运算返回一个值不知道给谁
				bai = parseInt(i/100);
				//shi = ((i-bai*100)/10)；例如 525-5*100/10=2
				shi = parseInt(i%100/10);
				ge = parseInt(i%10);
				if(i==ge*ge*ge+shi*shi*shi+bai*bai*bai)
				{
					document.write("三位数的水仙花数为="+i);
				}
				
				
			}*/
			/*第二种方法：*/
			
			for ( var i=100; i< 1000; i++) {
				//找出满足条件的三位数
				 var bai = parseInt(i/100);
				 var shi = parseInt((i-bai*100)/10);
				 /*var ge =  parseInt((i-(bai*100)/10-(i/100)));*/
				 var ge = parseInt(i%10);
				 if (i==ge*ge*ge+shi*shi*shi+bai*bai*bai) {
				 	
				 	document.write("三位数的水仙花数为="+i);
				 }
			}
			
		</script>
	</head>
	<body>
		
	</body>
</html>

3.练习求质数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 在页面中输入一个用户的数字，并判断是否质数
			 * 质数：质数是指在大于1的自然数中，除了1和它本身以外不再有其他因数的自然数。
			 * 也就是是除了1和它本身，其他的数都不能整除它
			 * 
			 * 举例：3只能来除2，4只能来除2，3，5只能来除432....
			 * */
			//1.用户输入prompt
			var num = prompt("请输入一个数");
			 	//alert(num);
			//2.判断是否质数(只能被1和它自身整除的数)
			if(num<=1){
				alert("输入不合法");
			}else{
			
			//4.创建一个变量来保存当前的状态
			//默认当前num是质数
			var flag= true;
				
			//3.判断整除的质数
				for( var i =2 ; i<num ; i++){
					//3只能来除2，4只能来除2，3，5只能来除432....
					//9/2，只是说明9暂时不能被2整除而已，不代表所有的i
					//那怎么样才能代表所有的i呢
					// num % i !=0 判断是质数，但是条件不够
					
					//判断不是质数
					if( num % i == 0){
						//如果num能被i整除，则说明num一定不是质数
						//求非质数
						//alert(num+"不是质数");
						//alert("是质数");
					//4.不是质数
						flag=false;//传出来结果到下边的4.是质数，告诉我你到底是不是质数
						//alert(num+"不是质数");不能写就是输出还没出结果呢
					}	
				}
				
				//4.是质数
				if(flag){
					alert(num+"是质数");
				}else{
					alert(num+"不是质数");
				}
				
			}
			 
			
		</script>
	</head>
	<body>
	</body>
</html>

4.完整的质数练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 质数：质数是指在大于1的自然数中，除了1和它本身以外不再有其他因数的自然数能够整除它。
			 * 
			 */
			//1.输入一个数
			//2.判断输入是不是合法
			//3.判断输入的数是否能够整除这个数i
			var num = prompt("请输入一个数=");
			var flag = true;//假设所有的数都是质数，临时变量
			if (num<=1) {
				alert("输入不合法：");
			}else{
				for(var i =2 ; i<num ; i++)//历遍2-num的数
				{
					if( num % i==0 ){
						//他不是质数
						flag=false;//传到
					}
				}
				if(flag){
					alert("它是质数");
				}else{
					alert("不是质数");//这里，看这里
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

5.or循环的嵌套99乘法表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 99乘法表
			 * 
			 * 复习：一遍一次，两边两次，三边三次…………
			 * 
			 * 
			 * 
			 * */
		/*	for (var i = 1;i<10;i++) {
				for (var j=1;j<=i;j++) {
					document.write("  "+i+"*"+j+"="+i*j);
				}
				document.write("<br>");
			}
			document.write("<br>");
			document.write("<br>");*/
			
			
			/*输出1-100之间的质数，挑战:求和*/
			/*固定的值  就不存在合法不合法了*/
			//var flag=true;
			//a3=b2,a4=b2b3,a5=b2b3b4
			//1.2-100的值
			//判断是否是质数（除了一和它本身之外不能够被其他数整除的）
			
			//99乘法表
			
			
			//1.9行9列
			//2.想想办法变为逐减变增
			//第一层是高度 1-9，九层        外1层 内9列
			for(var i =1 ; i<10 ; i++){
				//第二层是宽度
				for( var j =1 ; j<=i ; j++){
					//j数宽度，i是高度 
					document.write(" "+j+ " * "+i+"=" +i*j);
				}
				document.write("<br>");
			}
			
		</script>
		<!--<style type="text/css">
			span{
				display: inline-block;
				width: 50px;
			}-->
		</style>
	</head>
	<body>
	</body>
</html>

6.for循环的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			嵌套的 for 循环
			
				*
				* *
				* * *
				* * * *
				* * * * *
		
				*****
				*****
				*****
				*****
			for 循环执行几次，图形的高度就是多少
			它可以用来控制图形的高度
			
			内循环控制图形的宽度
			
			
			个人：就是当外部循环进入初始化的时候，执行一次判断，
					为true进入第二个循环
					直到第二个循环终止。外部才会再执行第二次，往复循环
					外部一次，内部结束（多次）：一对多的关系。

			 */
			for(var i=0 ; i<5 ; i++){
				/*
				 在循环的的内部创建一个循环，用来控制图形的宽度
				 * 目前我们的外部的for循环执行一次，内部的就会执行5次
				 * 
				 * 内层循环可以来决定图形的宽度，执行几次图形的宽度就是多少
				 *  
				 * 内层循环或者外层循环是变化的就不能写死
				 * */
				for ( var j=0 ; j<5 ; j++) {
					document.write(" *");
				}
				document.write("<br>");
			}
			
			
			/*第二个图：*/
			document.write("第二个图");
			document.write("<br>");
			
			/*
			 * 复习：x=0，y=1遍；x=1，y=2遍
			 * 
			 * 
			 * 
			 */
			
			
			
			
			for (var x =0;x<5;x++) {
				for (var y=0;y<x+1;y++) {
					document.write(" *");
				}
				document.write("<br>");
			}
			
			/*第三个图：*/
			document.write("第三个图");
			document.write("<br>");
			for ( var a=0 ; a <5 ; a++) {
				/*
				 *****
				 ****
				 ***
				 **
				 * 
				 第一行的时候5个  b=5  b--
				 4个  b=4
				 3个  b=3
				 2个  b=2
				 1个  b=1

				 * */
				for (var b=5; b>a;b--) {
					document.write(" *");
				}
				document.write("<br>");
			}
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

7.for循环的三角形练习

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript">
			/*
			 
			 * 
			 * *
			 * * *
			 * * * *
			 * * * * *
			

			 * */
			
			for(var i =1; i<=5 ; i++)
			{
				/*
				 既然高度是1-5，那么变化的只有i从1变5，直接用i
				 * 
				 * 
				 * */
				for (j=1 ; j<=i; j++) {
					document.write(" * ");
				}
				document.write("<br>");
			}
			/*倒三角 第二种方法*/
	
			document.write("<br>");
			for(var a =0; a<5 ; a++)
			{
				/*
				 * * * * *  j<0  5-0       i=0
				 * * * *	j<1  5-1       i=1
				 * * *      j<2  5-2       i=2
				 * * 		j<3  5-3       i=3
				 *          j<4  5-4       i=4
				 
				 相当于：j<5-i
				 * */
				//for (b=5 ; b>a; b--)也可以，利用：大——小
				for (b=0 ; b<5-a; b++) {//也可以，利用判断里的变量
					document.write(" * ");
				}
				document.write("<br>")
			}
			/*
			 总结：
			 变量和判断是可以改变连接上下关系的值的大小的
			 * 
			 * 
			 * */
			
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

8.把所有的练习打一遍包括新找的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 
			 * 从键盘输入小明的期末成绩：
			 * 当成绩为100时，"奖励一辆BMW"
			 * 当成绩为[80-99]时,"奖励一台iphone15s"
			 * 当成绩为[60-80]时,"奖励一本JavaScript语法书"
			 * 其他时，什么都没有
			 * 
			 */
			/*练习一:*/
			/* var num = prompt("请输入小明的成绩");
			 if (num<0||num>100) {
			 	alert("输入不合法");
			 }else{
			 	if(num==100){
			 		alert("奖励一辆BMW");
			 	}else if(num>80&&num<=99){
			 		alert("奖励一台iphone15s");
			 	}else if(num>60&&num<=80){
			 		alert("奖励一本JavaScript语法书");
			 	}else if(num<60){
			 		alert("奖励一根棍子");
			 	}else{
			 		alert("输入不合法");
			 	}
			 }*/
			/*练习二:*/
			/*
		 	    三个数从小到大排序
		 	  prompt();这个函数返回的是一个字符串，所以用的时候需要注意在前面加 +prompt() 让它的返回结果变成数值。
		 	*/
		 	 /*var num1 = prompt("输入num1的值=");
		 	 var num2 = prompt("输入num2的值=");
			 var num3 = prompt("输入num3的值=");
			 if (num1<num2 && num1<num3) {
			 	if(num2<num3){
			 		alert("从小到大是="+num1+","+num2+","+num3);
			 	}else{
			 		alert("从小到大是="+num1+","+num3+","+num2);
			 	}
			 }else if(num2<num1&&num2<num3){
			 	if(num1<num3){
			 		alert("从小到大是="+num2+","+num1+","+num3);
			 	}else{
			 		alert("从小到大是="+num2+","+num3+","+num1);
			 	}	
			 }else if(num3<num1&&num3<num2){
			 	if(num1<num2){
			 		alert("从小到大是="+num3+","+num1+","+num2);
			 	}else{
			 		alert("从小到大是="+num3+","+num2+","+num1);
			 	}
			 }else{
			 	alert("输入不合法");
			 }*/
			/*练习三:*/
			/*
			 	手动输入一个数：大于等于60合格，小于60不合格
			*/
			/*var num = +prompt("请输入");
			switch(parseInt(num/60)){//61/60
				case 1:
					alert("及格");
					break;
				case 0:
					alert("不及格");
					break;
				default:
					alert("输入不合法");
			}*/
			/*var num = +prompt("请输入");
			switch(parseInt(num/10)){//61/60
				case 9:
				case 8:
				case 7:
				case 6:
					alert("及格");
					break;
				case 0:
					alert("不及格");
					break;
				default:
					alert("输入不合法");*/
			/*方法二
			 JS常用
			 * */
		/*var num = prompt("请输入num");
			switch(true){
				case num>=60&&num<=100:
					alert("及格");
					break;
				case num<60&&num>=0:
					alert("不及格");
					break;
				default:
					alert("不合法");
					break;
			}*/
			
			
		</script>
	</head>
	<body>
	</body>
</html>

9.所有练习下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*var num = +prompt("请输入");哪错了？
			switch(parseInt( num / 10)){//61/60
				case 10:
				case 9:
				case 8:
				case 7:
				case 6:
					alert("及格");
					break;
				case 5:
				case 4:
				case 3:
				case 2:
				case 1:
				case 0:
					alert("不及格");
					break;
				default:
					alert("输入不合法");*/
			/*判断一个数是不是质数*/
			/*var num = prompt("请输入");
			var flag=true;
			if(num<=1){
				alert("输入不合法");
			}else{
				for (var i = 2 ; i<num ; i++){
					
					if( num%i ==0 ){
						flag=false;//由判断表达式得出为不是质数
						//逆向思维
					}
					
				}
				if(flag){
					alert("是质数");
				}else{
					alert("不是质数");
				}
			}*/
			/*1-100之间的质数*/
			//1.循环输出1-100
			//2.判断质数
			/*for ( var i = 2 ; i<=100 ; i++) {
				//document.write(i);
				//外循环一个数字，内循环判断一次
				//i2=2j，i3=2j，i4=2j3j
				
				var flag=true;//为什么是放这里，假设；2-100的都为质数
				for (var j = 2 ; j<i ; j++) {
					if (i%j==0) {
						flag=false;//不属于质数
					}
				}
				//循环输出所有的质数
				if(flag){
					document.write(" "+i);
					
				}
			}*/
		/*第一种矩形*/
		for(var i = 0 ; i<5 ; i++)
		{
			for (var j = 0 ; j<5 ; j++) {
					document.write(" *");
			}
			document.write("<br>");
		}
		document.write("第二种");
		document.write("<br>");
		for( var x = 1 ; x<=5 ; x++){
			for (var y=1; y<=x ; y++) {
				document.write(" *");
			}
			document.write("<br>");
		}
		document.write("第三种");
		document.write("<br>");
		for ( var a = 0 ; a<5 ; a++) {
			for (var b = 0;b<5-a;b++) {
				document.write(" *");
			}
			document.write("<br>");
		}
		
	
			
			
			
					
		</script>

	</head>
	<body>
	</body>
</html>

总结

这天的内容还是蛮重要的，对于逻辑的基础理解（个人建议js学完之后可以去刷js的语算法题）

内容：练习+个人理解+代码小demo

小周日记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4、JS的基础学习——04day

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档目录1.for循环2.for循环练习3.练习求质数4.完整的质数练习5.or循环的嵌套99乘法表6.for循环的嵌套7.for循环的三角形练习8.把所有的练习打一遍包括新找的9.所有练习下总结1.for循环<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title.
复制链接

扫一扫

专栏目录