昨天與國家獎學金失之交臂，傷心的哭了一晚上，生活也還是要繼續，抹完了眼淚今天繼續干我的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"; /* 遍歷每一個找到的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
一個敲可愛的人歡迎您的一鍵三連

有問題，私信也可，評論也可，看見必回，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/192412.html

標籤：其他

上一篇：vue專案實錄：下拉重繪組件的開發及slot的使用

下一篇：QOS（一）服務模型

心情再差，也還是要拿起我的 JavaScript 實戰重點代碼

目錄