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

一、JavaScript的几个常用函数
- 实战下载框制作
二、如何获取一个或者多个元素
- 2.1根据ID查找
- 2.2根据class查找
- 2.3根据标签查找
- 2.4创建节点
- 2.5删除一个元素
- 2.6如何修改属性
- 2.7更改img标签的src属性值
- 2.8修改class
- 2.9使用innerHTML来修改内部内容
- 2.10更换页面样式表(网页换肤)
三、特殊值及转义字符
- 3.1两个特殊数值NaN和Infinity
- 3.2转义字符的用法
- 3.3未定义(undefined)和空(null)
- 3.4Javascript中的类型转换
- - 3.4.1强制类型转换
  - 3.4.2自动类型转换
四、（实战）倒计时的制作

一、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的结构。

这边分享一个小故事，我专业老师当时读的是数学专业，上了大学没有参加什么活动，一心搞学习，结果在大二的时候已经在实习了，完全自学代码，这是我很喜欢听他的课的原因，有次讲了他一个很搞笑的事情，面试的时候，被问到什么是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";  } </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">  var para=document.createElement("p");  var node=document.createTextNode("这是新的一个段落");  para.appendChild(node);   var element=document.getElementById("div1");  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
一个敲可爱的人欢迎您的一键三连

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

• vuecli项目构建SSR服务端渲染	• XSS基础
• 简单制作一个百度注册页面	• CSDN Chrome插件来了。助开发者提升开发效率，
• HTML入门基础	• 微信小程序：报错(in promise) MiniProgramErro

• Esp8266天猫精灵_RGB灯_非点灯平台	• STM32F103 串口1和串口3对发数据配合蓝牙模块
• TMS570学习【1】了解什么是TMS570	• 新闻稿 \| Qt公司收购froglogic公司以巩固市场领
• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订	• 苹果群控投屏同步操作原理及运用的平台APP分享

• Esp8266天猫精灵_RGB灯_非点灯平台	• STM32F103 串口1和串口3对发数据配合蓝牙模块
• TMS570学习【1】了解什么是TMS570	• 新闻稿 \| Qt公司收购froglogic公司以巩固市场领
• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订	• 苹果群控投屏同步操作原理及运用的平台APP分享
• STM32查询式按键输入[直接用寄存器]	• Ubuntu系统 USB设备端口绑定
• 2021-04-14 第四次按键输入实验	• Flutter扫码功能完美实现

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

目录