昨天与国家奖学金失之交臂，伤心的哭了一晚上，生活也还是要继续，抹完了眼泪今天继续干我的JavaScript！

一、JavaScript的几个常用函数

typeof函数查看变量类型
typeof（变量名）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			 var value = '甜甜';    // string（字符串）
			    console.log(typeof value);
				value = 21;		//  number(数字)
				console.log(typeof value);
				value = true; //  boolean（布尔型）
				console.log(typeof value);
		</script>
	</body>
</html>

去运行一下就知道啦，右键检查，去控制台。

setInterval函数(定时器)

setInterval(function(){
	//每秒钟执行一次此处的代码
},100);

见下面那个实战
setTimeout （延迟执行）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		请等我5秒钟，我会夸你帅！
		<script>
		    setTimeout("alert('你是最帅的，最帅的人要多等候5秒钟')", 5000 )
		</script>
	</body>
</html>

实战下载框制作

loading.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
     
     
				margin: 0;
				padding: 0;
			}
			
			#box1{
     
     
				width: 700px;
				height: 30ox;
				border: solid 1px khaki;
				margin-top: 50px;
				margin-left: 10px;
			}
			
			#box2{
     
     
				width: 0px;
				height: 30px;
				background-color: red;
			}
			
			#box3{
     
     
				margin-left: 10px;
				color: black;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				
			</div>
		</div>
		<span id="box3">
			
		</span>
		<script type="text/javascript">
			
			var i=0;
			var timger1=setInterval(function(){
     
     
				i=i+10;
				document.getElementById("box2").style.width=i+"px";
				document.getElementById("box3").innerHTML=parseInt((i/700)*100)+"%";
				if(i>=700)
				{
     
     
					clearInterval(timger1);
				}
				
			},100);
		</script>
	</body>
</html>

拿去运行一下就知道了哈哈哈哈

二、如何获取一个或者多个元素

要操作一个元素，首先要找到它。
我们一般有多种方法找到一个元素。
获取到一个元素之后，我们能做什么？

能设置这个元素的样式。
能获取和设置到这个元素里面的内容（带html结构的）。
能获取和设置这个元素里面的文本。
能获取和设置这个元素的属性。
能删除这个元素。

总结：有了js之后，就可以动态的修改DOM的结构。

扫描二维码关注公众号，回复： 12019687 查看本文章

这边分享一个小故事，我专业老师当时读的是数学专业，上了大学没有参加什么活动，一心搞学习，结果在大二的时候已经在实习了，完全自学代码，这是我很喜欢听他的课的原因，有次讲了他一个很搞笑的事情，面试的时候，被问到什么是dom，哈哈哈他不知道，就叫回去等结果（完蛋）哈哈哈哈，其实dom就是文档对象模型 (DOM) 是HTML和XML文档的编程接口

2.1根据ID查找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
	</style>
	<body>
		<a id=lovely href="https://blog.csdn.net/hanhanwanghaha">欢迎关注这个敲可爱的人鸭</a>
		
		<a id=homepage https://me.csdn.net/hanhanwanghaha">此时我的javascript中没有执行ID为homepage的那段超链接</a>
		
		<script type="text/javascript">
			var lovely = document.getElementById("lovely")
			alert(lovely.innerText)
		</script>
	</body>
</html>

2.2根据class查找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.box1{
     
     
			height: 50px;
			width: 50px;
			background-color: gold;
		}
		
		.box2{
     
     
			height: 50px;
			width: 50px;
			background-color: gold;
		}
		
		.box3{
     
     
			height: 50px;
			width: 50px;
			background-color: gold;
		}
	</style>
	
	<body>
		<div class="box1">
			
		</div>
		
		<div class="box1">
			
		</div>
		
		<div class="box2">
			
		</div>
		<div class="box3">
			
		</div>
		
		<script type="text/javascript">
			var list_ok = document.getElementsByClassName("box1");
			for (var i=0;i<list_ok.length;i++){
     
     
				list_ok[i].style.border = "solid 3px red"; /* 遍历每一个找到的i */
			}
		</script>
	</body>
</html>

2.3根据标签查找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		
	</style>
	<body>
		<a id=lovely href="https://blog.csdn.net/hanhanwanghaha">欢迎关注这个敲可爱的人鸭</a>
		
		<div id="homepage">
			<a href="https://www.qqtn.com/article/article_124916_1.html">齐天大圣</a>
		</div>
		
		<script type="text/javascript">
			var lovely = document.getElementsByTagName("div")
			alert(homepage.innerText)
		</script>
	</body>
</html>

2.4创建节点

通过js动态地创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div id="div1">
			<p id="p1">这是第一个段落</p>
			<p id="p2">这是第二个段落</p>
		</div>
	</head>
	<style type="text/css">
		
	</style>
	<body>
		<script type="text/javascript">
			/*1.创建新的<p>元素*/
			var para=document.createElement("p");
			/*2.向<p>元素添加文本（首先创建文本节点），（此段代码创建了一个文本节点）*/
			var node=document.createTextNode("这是新的一个段落");
			/*向<p>元素追加这个文本节点*/
			para.appendChild(node);
			/*最后您必须向一个已有的元素追加这个元素*/
			/*3.这段代码找到一个已有的元素*/
			var element=document.getElementById("div1");
			/*4.这段代码向这个已有的元素追加新元素*/
			element.appendChild(para);

		</script>
	</body>
</html>

2.5删除一个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="div1">
			<p id="p1">这是第一个段落</p>
			<p id="p2">这是第二个段落</p>
		</div>
		
		<script type="text/javascript">
			/*找到父元素*/
			var parent=document.getElementById("div1");
			/*找到子元素*/
			var child=document.getElementById("p1");
			/*将子元素从父元素中删除*/
			parent.removeChild(child);
		</script>
	</body>
</html>

如果只知道子元素的id,父元素没有id也没有class,可以使用下面的办法：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

2.6如何修改属性

HTML标签中，有什么属性，就用document.getElementById()得到这个元素之后，点什么属性再进行修改！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		
	</style>
	<body>
		<a id=lovely href="https://blog.csdn.net/hanhanwanghaha">从我的主页转换到B站</a>
		
		<script type="text/javascript">
			document.getElementById("lovely").href="https://www.bilibili.com/video/BV1fT4y137yU?from=search&seid=10946771334789229192";
		</script>
	</body>
</html>

2.7更改img标签的src属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的现女友和前女友</title>
	</head>
	<script type="text/javascript">
		function change(){
     
     
			document.getElementById("imgs").src = "img/Jolin.jpg";
			document.getElementById("imgs").title = "前女友"
		}
	</script>
	<body>
		<input type="button" value="change" onclick="change()"/>
		<img id="imgs" src="img/pink.jpg" title="现女友" />
	</body>
</html>

图片可以自己找，我奉上两张个人特别喜欢的人

点击左下角的change

在这里插入图片描述
就会变成下图的照片

在这里插入图片描述
有什么，就点什么！常见的是：
img 标签的src属性；a标签的href属性、title属性。

2.8修改class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎关注</title>
	</head>
	
	<body>
		<p id="lovely" class=taga >欢迎关注这个敲可爱的人呀</p>
		
		<script type="text/javascript">
			document.getElementById("lovely").className = "taglovely"
		</script>
	</body>
</html>

见下图
在这里插入图片描述
在保留class="taga"的基础上再添加一个类名为 hanhan

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎关注</title>
	</head>
	
	<body>
		<p id="lovely" class=taga >欢迎关注这个敲可爱的人呀</p>
		
		<script type="text/javascript">
			document.getElementById("lovely").className += " hanhan"
		</script>
	</body>
</html>

在这里插入图片描述

2.9使用innerHTML来修改内部内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎关注</title>
	</head>
	
	<body>
		<div id="lovely">
			我是周杰伦的小可爱
		</div>
		
		<script type="text/javascript">
			document.getElementById("lovely").innerHTML = "<div>总有一天要让周杰伦认识我</div>";
		</script>
	</body>
</html>

2.10更换页面样式表(网页换肤)

这边看到一个写的很不错的代码

https://blog.csdn.net/suwu150/article/details/78313803

三、特殊值及转义字符

3.1两个特殊数值NaN和Infinity

NaN(计算错误，类型转换失败)
Infinity(除数为零)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎关注</title>
	</head>
	
	<body>
		<script type="text/javascript">
					console.log(1/0);
		</script>
	</body>
</html>

运行到谷歌，右键检查就可以就会报下面的东东
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎关注</title>
	</head>
	
	<body>
		<script type="text/javascript">
					console.log("a"/0);
		</script>
	</body>
</html>

运行到谷歌，右键检查就可以就会报下面的东东
在这里插入图片描述

3.2转义字符的用法

如果字符串的数据中出现特殊的符号需求使用转义字符（\）额外处理。

3.3未定义(undefined)和空(null)

变量定义后从未赋值时，该变量的默认值为undefined。
数据类型undefined只有一个值undefined。

注意：undefined代表，一个变量已经定义但是未赋值，默认值是undefined.

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
		<title>欢迎关注</title>
	</head>
	
	<body>
		<script type="text/javascript">
			
			var a;
			console.log(a);//undefined
			
		</script>
	</body>
</html>

运行之后右键检查
在这里插入图片描述
什么是空(null)？

数据类型null只有一个值null。
可以通过给一个变量赋 null 值来清除变量的内容。

上面蓝色的这句话，我没有特别懂，我问了一下老师，老师是这样回答的

有一个变量，里面装的有值，它就会占用我们的空间，如果说我们把这个值赋值为null，就可以把这个变量释放掉！

经典面试题： null与undefined比较

相同点：null,undefined均代表无值；

不同点：undefined代表一个变量如果没有赋值;
null代表一个对象没找到，那么就为null。

3.4Javascript中的类型转换

什么是类型转换 ？
将一种类型转为另外一种数据类型.例如: 将string类型的’1’转换成数字类型的1.

为什么要进行类型转换 ？
因为数据之间的运算只有同类型之间的运算, 如果不同类型之间存在运算的话,需要将其转换为同一种类型后再进行运算.

类型转换分为两种:
强制类型转换, 自动类型转换

3.4.1强制类型转换

使用parseInt()和parseFloat()将一种类型的数据到数字类型.（常用）

parseInt（变量名）：将变量转换为整数

parseFloat(变量名)：将字符串转为小数

Number (变量名)：将变量转换为数字，只能数字构的成字符串才可以转换

Boolean(变量名)：转换为布尔值，true/false;

String(变量名):转换为字符串；

3.4.2自动类型转换

在运行过程中根据编程语言的运算的语意环境,Javascript会自动进行类型转换.

四、（实战）倒计时的制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
     
     
				margin: 0;
				padding: 0;
			}
			
			body
			{
     
     
				background-color: pink;
			}
			
			#box1{
     
     
				color: red;
				font-size: 60px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			
		</div>
		
		<script type="text/javascript">
			aa();
			var timer1=setInterval(function(){
     
     
				aa();
			},1000)
			
			
			function aa()
			{
     
     
				var endtime=new Date("2021/2/12 00:00:00");
				var now=new Date();
				var t=endtime.getTime()-now.getTime();
				if(t>0)
				{
     
     
					var day=Math.floor(t/1000/60/60/24);
					var hour=Math.floor(t/1000/60/60%24);
					var mouth=Math.floor(t/1000/60%60);
					var second=Math.floor(t/1000%60);
					var str="距离春节还有"+day+"天 "+hour+"小时 "+mouth+"分 "+second+"秒";
					document.getElementById("box1").innerHTML=str;
					
				}
				else
				{
     
     
					clearInterval(timer1);
					document.getElementById("box1").innerHTML="春节已到！";
					
				}
				
			}	
		</script>
	</body>
</html>

终于写完了。。。
https://blog.csdn.net/hanhanwanghaha
一个敲可爱的人欢迎您的一键三连

有问题，私信也可，评论也可，看见必回。

心情再差，也还是要拿起我的 JavaScript 实战重点代码

目录