javascript
心情再差，也还是要拿起我的 JavaScript 实战重点代码
昨天與國家獎學金失之交臂，傷心的哭了一晚上，生活也還是要繼續，抹完了眼淚今天繼續干我的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（變量名）
去運行一下就知道啦，右鍵檢查，去控制臺。
setInterval函數(定時器)
setInterval(function(){//每秒鐘執行一次此處的代碼 },100);見下面那個實戰
setTimeout （延遲執行）
實戰下載框制作
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>拿去運行一下就知道了哈哈哈哈
二、如何獲取一個或者多個元素
要操作一個元素，首先要找到它。
我們一般有多種方法找到一個元素。
獲取到一個元素之后，我們能做什么？
總結：有了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
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(除數為零)
運行到谷歌，右鍵檢查就可以就會報下面的東東
運行到谷歌，右鍵檢查就可以就會報下面的東東
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>https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
讓這個可愛的寶藏女孩在努力的道路上與你一起同行！
如有轉載，請注明出處（如不注明，盜者必究）
運行之后右鍵檢查
什么是空(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 实战重点代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ERROR: Cannot unpack
- 下一篇： 简述get 和 post 的主要区别——