04.25

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

---

一、js之switch语句练习

定义一个文本输入框与一个按钮

<input type="text" id="month" placeholder="请输入月份的值" />
<input type="button" value="点击查询" onclick="myMonth()" />

按钮就相当于事件源,并且将myMonth()绑定到事件源上
昨天做过一个输入月份让他去判断此时的季节,在判断的部分,使用的是if函数来进行判断,今天使用简单的switch函数的话,用case 1:来进行判断,此时,value的值是string类型的,而case后面的1类型是整形,两者的类型是不同的

<script>
			//执行一个函数---点击"点击查询"这个按钮,触发"点击事件"
function myMonth(){		
			var  textContent = document.getElementById("month").value ;
				
				//textContent是String类型,而case后面的值Number
			   textContent = parseInt(textContent) ;
			  
				switch(textContent){
				//利用case传统
				case 3:
				case 4:
				case 5:
					alert("春季") ;
					break ;
				case 6:
				case 7:
				case 8:
					alert("夏季") ;
					break ;
				case 9:
				case 10:
				case 11:
					alert("秋季") ;
					break ;
				case 1:
			    case 2:
				case 12:
					alert("冬季") ;
					break ;
				default:
					alert("非法数据") ;
					break ;
				}
			}
			
	</script>

二、js之循环结构语句

for循环的使用
for(初始化语句;条件表达式;控制体语句){
循环体语句;
}

for循环执行流程:
1)首先初始化语句执行一次,给变量赋值
2)判断条件表达式是否成立,如果成立,就执行循环体语句
3)继续执行控制体语句(也称为"步长语句"),++或者-- 对变量自增或者自减1
4)继续判断条件表达式是否成立,如果成立,继续执行循环体语句,执行控制体语句,
…
…
5)直到条件表达式不成立,for循环结束!

1.在浏览器中打印N次

js循环的核心思想是当针对重复数据操作,重点在"循环"
for:开发中最常见的
while:其次
do-while:很少使用的在开发中
最原始的做法

 <script>
			//需求:需要在浏览器中打印,5次 "helloworld"
			//最原始的做法
			
			document.write("helloworld"+"<br/>") ;
			document.write("helloworld"+"<br/>") ;
			document.write("helloworld"+"<br/>") ;
			document.write("helloworld"+"<br/>") ;
			document.write("helloworld"+"<br/>") ;
</script>

同时我们可以使用for循环来更简单的表达出来

2. for循环的使用

<script>
for(var i =1 ; i <=5; i ++){ //i=1,1<=5 ,第一次执行循环体;i++ 变成2...
				//循环体
				document.write("helloworld"+"<br/>") ;
			}
				document.write("<hr/>") ;
				
				//1-10---输出到浏览器上
				for(var i =1; i <=10 ; i++){
					document.write(i+"<br/>") ;
				}
</script>

3.求和思想

<script>
 var sum = 0 ;
			   for(var i = 1 ; i<=10 ; i ++){
				   //i=1...10都可以取出来
				   //sum += x ; //等价于 sum = sum + x ;  将符号左边的数据和右边的求和,在赋值给左边的变量
				   sum = sum + i ; //sum = 0 +1 ; sum = 1
									//i++;i=2,  2<=10,	sum = 1 + 2  = 3
									//i++;i=3,3<=10, sum = 3 + 3 = 6 
								    
			   }
			   document.write("1-10之间的和是:"+sum) ;
</script>

4.阶乘

 <script>
//定义一个结果变量
				var jc = 1 ;
				for(var i = 1; i <=5 ; i ++){
					jc*=i ; // jc = jc * i ; 
							//1)jc = 1 * 1 = 1
							//2)i++,i=2,2<=5 ,  jc = 1 * 2 = 2
							//3)i++,i=3,3<=5,jc = 2 * 3
							//4)i++,i=4,4<=5, jc=6 * 4
							//5)i++,i=5,5<=5,jc=24 * 5
							//6)i++,i=6, 6<=5 ,不成立,循环结束!
				}
				document.write("5的阶乘是:"+jc) ;
	 
 </script>

三、while_do-while语句

while格式
初始化语句;
while(条件表达式){
循环体语句;
控制体语句(步长语句) ;
}

while 执行流程:
1)初始化语句对变量赋值
2)判断条件表达式是否成立,
成立,则执行循环体,一次执行步长语句;
3)再次判断条件表达式是否成立,…
4)条件不成立,循环结束!

for循环: 明确循环的次数,使用for
while循环:不明确循环的次数,使用while

常见的死循环:
while(true){
//当满足某种条件的时候,break; 结束循环!
}

1.while语句在浏览器中输出 5次"helloworld"

<script>
			// 初始化语句;
			var i = 1 ;
			while(i<=5){
				document.write("helloworld<br/>") ;
				i ++ ;
			}
</script>

2.do-whike格式

do-while格式 实际开发场景下,用的很少!
初始化语句;
do{
循环体语句;
控制体语句(步长语句);
}while(条件表达式) ;

<script>
//需求:在控制台输出 6次,"我爱高圆圆"
			var x = 7;
			do{
				document.write("我爱高圆圆<br/>") ;
				x++ ;
			}while(x<=6) ; 
			
</script>

do-while和for以及while循环最大的区别:
即使条件不成立,循环体至少执行一次!

四、for的应用

使用水仙花的例子来练习for的使用

<script>
				
				//document.write(Math.floor(153/10 % 10) ) //Math.floor(值):向下取整
				//1)明确三位数,使用for循环 100-999
				for(var i = 100 ; i <=999; i++){
					//确定每个位数据值
					var ge = i % 10 ; 
				
					var shi = Math.floor(i/10 % 10) ;
					
					var bai =  Math.floor( i/10 /10 % 10) ;
					
					//满足条件,i ==(ge*ge*ge+shi*shi*shi+bai*bai*bai)
					if(i==(ge*ge*ge+shi*shi*shi+bai*bai*bai)){
						document.write("水仙花数是:"+i+"<br/>");
					}
				}
</script>

五、js内置对象date

date对象:表示当前日期对象
如何创建?
三种写法(手册) 我们通常只使用第一种:
dateObj=new Date();

浏览器想要显示2022年4月25日
date对象给我们提供了什么功能?获取年月日…
对象名.访问方法名();

<script>
var dateStr =new Date()	;
			var year =dateStr.getFullYear();
			document.write(year+"年");
			
			//获取月份
			var month =dateStr.getMonth()+1;
			document.write(month+"月");
			
			//获取月份中的日期
			var date = dateStr.getDate();
			document.write(date+"日");
</script>

六、innerHTML和innerText属性

任何标签都有这两个属性
innerHTML 设置标签的文本内容
innerText

如何动态给span或者div添加文本内容
使用dom操作
1.给个id 通过一个固定语法 获取id=“属性值”
docuement.getElementById.(“id属性值”);
2.标签对象.innerHTML =“”;//可以加入html标签 (常用)
innerText=“设置普通文本”;

<body>
		<span id="spanTip"></span>
	</body>

<script>
		var span = document.getElementById("spanTip") ;
		span.innerHTML = "<h1>我爱高圆圆</h1>" ;
		
		
</script>

七、一个网页时钟

访问页面,
1.立马给span设置文本内容 当前时间的时间字符串,每经过一秒,重复执行(定时器)
2. 每过一秒,重复执行,产生日期时间字符串(定时器)

1.需要将myDate这个日期时间字符串 ,动态添加到span标签的文本内容中
2.通过id=“tip” 获取span标签对象
3.设置span标签的文本内容: innerHTML
4.每经过1秒钟,重复性的执行,产生日期时间字符串(定时器)

<body>
		<h3>当前时间是:</h3>
		<span id="tip"></span>	
	</body>

<script>
function myGenDate(){
		//先将日期对象创建出来,获取年,月,日,时分秒
		var dateStr =new Date();
		//拼接出日期时间字符串
		var myDate = dateStr.getFullYear()+"-"+(dateStr.getMonth()+1)+"-"+dateStr.getDate()
		+"&ensp;&ensp;"+dateStr.getHours()+":"+dateStr.getMinutes()+":"+dateStr.getSeconds() ;

		
		var span= document.getElementById("tip");
		//设置span标签的文本内容: innerHTML
		span.innerHTML = "<h3>"+myDate+"</h3>" ;
			
		}
		setInterval("myGenDate()",100);
		
	</script>

八、js内置string

js中string指字符串数据值
它的格式:
1.创建一个js字符串对象
var对象名 = new string(“字符串值”);
2.要表示一个字符串的间歇格式
var 对象名 =“字符串值”;

 <script>
			 //创建一个字符串对象
		 var s1 =new String("hello");
		 document.write("s1:"+s1+"<br/>");
			 
			 //对上面的简写
			 var s2 ="hello";
		 document.write("s1:"+s2); 
		 document.write("<hr/>"); 
			 var s="helliwordjavaEE";
	
		document.write(s.fontcolor("green")+"<br/>");
		document.write("√".fontcolor("green")+"<br/>");
		document.write("<hr/>");
	 
 </script>

九、js中的函数定义域调用

js中定义函数的格式
function函数名就是你的方法名(形式参数列表){
业务代码…
}
调用函数:
1.单独调用:函数名称(实际参数列表)
2.function 函数

注:1.形式参数中不能带var,直接写名称
2.在定义的函数例可以直接输出内容
var 变量=形式参数进行运算;
直接输出结果或在js中函数里面可以带return返回一个具体的结果值

<script>
			//定义一个函数(方法),这个方法要进行求和
		
			function sum(a,b){
				//return表示结束方法,并带给调用者一个结果
				return a+b;
			}
			var maResult= sum(40,50);
			document.write("和为:"+maResult);
			
</script>