當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時間：2025/3/15 javascript 18 豆豆

生活随笔收集整理的這篇文章主要介紹了心情再差，也还是要拿起我的 JavaScript 实战重点代码小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

昨天與國家獎學(xué)金失之交臂，傷心的哭了一晚上，生活也還是要繼續(xù)，抹完了眼淚今天繼續(xù)干我的JavaScript！

一、JavaScript的幾個常用函數(shù)
- 實(shí)戰(zhàn)下載框制作
二、如何獲取一個或者多個元素
- 2.1根據(jù)ID查找
- 2.2根據(jù)class查找
- 2.3根據(jù)標(biāo)簽查找
- 2.4創(chuàng)建節(jié)點(diǎn)
- 2.5刪除一個元素
- 2.6如何修改屬性
- 2.7更改img標(biāo)簽的src屬性值
- 2.8修改class
- 2.9使用innerHTML來修改內(nèi)部內(nèi)容
- 2.10更換頁面樣式表(網(wǎng)頁換膚)
三、特殊值及轉(zhuǎn)義字符
- 3.1兩個特殊數(shù)值NaN和Infinity
- 3.2轉(zhuǎn)義字符的用法
- 3.3未定義(undefined)和空(null)
- 3.4Javascript中的類型轉(zhuǎn)換
- - 3.4.1強(qiáng)制類型轉(zhuǎn)換
  - 3.4.2自動類型轉(zhuǎn)換
四、（實(shí)戰(zhàn)）倒計(jì)時的制作

一、JavaScript的幾個常用函數(shù)

typeof函數(shù)查看變量類型
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(數(shù)字)console.log(typeof value);value = true; // boolean（布爾型）console.log(typeof value);</script></body> </html>

去運(yùn)行一下就知道啦，右鍵檢查，去控制臺。

setInterval函數(shù)(定時器)

setInterval(function(){//每秒鐘執(zhí)行一次此處的代碼 },100);

見下面那個實(shí)戰(zhàn)
setTimeout （延遲執(zhí)行）

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

實(shí)戰(zhàn)下載框制作

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>

拿去運(yùn)行一下就知道了哈哈哈哈

二、如何獲取一個或者多個元素

要操作一個元素，首先要找到它。
我們一般有多種方法找到一個元素。
獲取到一個元素之后，我們能做什么？

能設(shè)置這個元素的樣式。

能獲取和設(shè)置到這個元素里面的內(nèi)容（帶html結(jié)構(gòu)的）。

能獲取和設(shè)置這個元素里面的文本。

能獲取和設(shè)置這個元素的屬性。

能刪除這個元素。

總結(jié)：有了js之后，就可以動態(tài)的修改DOM的結(jié)構(gòu)。

這邊分享一個小故事，我專業(yè)老師當(dāng)時讀的是數(shù)學(xué)專業(yè)，上了大學(xué)沒有參加什么活動，一心搞學(xué)習(xí)，結(jié)果在大二的時候已經(jīng)在實(shí)習(xí)了，完全自學(xué)代碼，這是我很喜歡聽他的課的原因，有次講了他一個很搞笑的事情，面試的時候，被問到什么是dom，哈哈哈他不知道，就叫回去等結(jié)果（完蛋）哈哈哈哈，其實(shí)dom就是文檔對象模型 (DOM) 是HTML和XML文檔的編程接口

2.1根據(jù)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">歡迎關(guān)注這個敲可愛的人鴨</a><a id=homepage https://me.csdn.net/hanhanwanghaha">此時我的javascript中沒有執(zhí)行ID為homepage的那段超鏈接</a><script type="text/javascript">var lovely = document.getElementById("lovely")alert(lovely.innerText)</script></body> </html>

2.2根據(jù)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根據(jù)標(biāo)簽查找

<!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">歡迎關(guān)注這個敲可愛的人鴨</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創(chuàng)建節(jié)點(diǎn)

通過js動態(tài)地創(chuàng)建

<!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.創(chuàng)建新的<p>元素*/var para=document.createElement("p");/*2.向<p>元素添加文本（首先創(chuàng)建文本節(jié)點(diǎn)），（此段代碼創(chuàng)建了一個文本節(jié)點(diǎn)）*/var node=document.createTextNode("這是新的一個段落");/*向<p>元素追加這個文本節(jié)點(diǎn)*/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標(biāo)簽中，有什么屬性，就用document.getElementById()得到這個元素之后，點(diǎn)什么屬性再進(jìn)行修改！

<!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">從我的主頁轉(zhuǎn)換到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標(biāo)簽的src屬性值

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>我的現(xiàn)女友和前女友</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="現(xiàn)女友" /></body> </html>

圖片可以自己找，我奉上兩張個人特別喜歡的人

點(diǎn)擊左下角的change

就會變成下圖的照片

有什么，就點(diǎn)什么！常見的是：
img 標(biāo)簽的src屬性；a標(biāo)簽的href屬性、title屬性。

2.8修改class

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>歡迎關(guān)注</title></head><body><p id="lovely" class=taga >歡迎關(guān)注這個敲可愛的人呀</p><script type="text/javascript">document.getElementById("lovely").className = "taglovely"</script></body> </html>

見下圖

在保留class="taga"的基礎(chǔ)上再添加一個類名為 hanhan

2.9使用innerHTML來修改內(nèi)部內(nèi)容

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>歡迎關(guān)注</title></head><body><div id="lovely">我是周杰倫的小可愛</div><script type="text/javascript">document.getElementById("lovely").innerHTML = "<div>總有一天要讓周杰倫認(rèn)識我</div>";</script></body> </html>

2.10更換頁面樣式表(網(wǎng)頁換膚)

這邊看到一個寫的很不錯的代碼

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

三、特殊值及轉(zhuǎn)義字符

3.1兩個特殊數(shù)值NaN和Infinity

NaN(計(jì)算錯誤，類型轉(zhuǎn)換失敗)
Infinity(除數(shù)為零)

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

運(yùn)行到谷歌，右鍵檢查就可以就會報(bào)下面的東東

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

運(yùn)行到谷歌，右鍵檢查就可以就會報(bào)下面的東東

3.2轉(zhuǎn)義字符的用法

如果字符串的數(shù)據(jù)中出現(xiàn)特殊的符號需求使用轉(zhuǎn)義字符（\）額外處理。

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

變量定義后從未賦值時，該變量的默認(rèn)值為undefined。
數(shù)據(jù)類型undefined只有一個值undefined。

注意：undefined代表，一個變量已經(jīng)定義但是未賦值，默認(rèn)值是undefined.

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

https://blog.csdn.net/hanhanwanghaha寶藏女孩歡迎您的關(guān)注！
歡迎關(guān)注微信公眾號：寶藏女孩的成長日記
讓這個可愛的寶藏女孩在努力的道路上與你一起同行！
如有轉(zhuǎn)載，請注明出處（如不注明，盜者必究）

運(yùn)行之后右鍵檢查

什么是空(null)？

數(shù)據(jù)類型null只有一個值null。
可以通過給一個變量賦 null 值來清除變量的內(nèi)容。

上面藍(lán)色的這句話，我沒有特別懂，我問了一下老師，老師是這樣回答的

有一個變量，里面裝的有值，它就會占用我們的空間，如果說我們把這個值賦值為null，就可以把這個變量釋放掉！

經(jīng)典面試題： null與undefined比較

相同點(diǎn)：null,undefined均代表無值；

不同點(diǎn)：undefined代表一個變量如果沒有賦值;
null代表一個對象沒找到，那么就為null。

3.4Javascript中的類型轉(zhuǎn)換

什么是類型轉(zhuǎn)換 ？
將一種類型轉(zhuǎn)為另外一種數(shù)據(jù)類型.例如: 將string類型的’1’轉(zhuǎn)換成數(shù)字類型的1.

為什么要進(jìn)行類型轉(zhuǎn)換 ？
因?yàn)閿?shù)據(jù)之間的運(yùn)算只有同類型之間的運(yùn)算, 如果不同類型之間存在運(yùn)算的話,需要將其轉(zhuǎn)換為同一種類型后再進(jìn)行運(yùn)算.

類型轉(zhuǎn)換分為兩種:
強(qiáng)制類型轉(zhuǎn)換, 自動類型轉(zhuǎn)換

3.4.1強(qiáng)制類型轉(zhuǎn)換

使用parseInt()和parseFloat()將一種類型的數(shù)據(jù)到數(shù)字類型.（常用）

parseInt（變量名）：將變量轉(zhuǎn)換為整數(shù)

parseFloat(變量名)：將字符串轉(zhuǎn)為小數(shù)

Number (變量名)：將變量轉(zhuǎn)換為數(shù)字，只能數(shù)字構(gòu)的成字符串才可以轉(zhuǎn)換

Boolean(變量名)：轉(zhuǎn)換為布爾值，true/false;

String(變量名):轉(zhuǎn)換為字符串；

3.4.2自動類型轉(zhuǎn)換

在運(yùn)行過程中根據(jù)編程語言的運(yùn)算的語意環(huán)境,Javascript會自動進(jìn)行類型轉(zhuǎn)換.

四、（實(shí)戰(zhàn)）倒計(jì)時的制作

<!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="距離春節(jié)還有"+day+"天 "+hour+"小時 "+mouth+"分 "+second+"秒";document.getElementById("box1").innerHTML=str;}else{clearInterval(timer1);document.getElementById("box1").innerHTML="春節(jié)已到！";}} </script></body> </html>

終于寫完了。。。

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

總結(jié)

以上是生活随笔為你收集整理的心情再差，也还是要拿起我的 JavaScript 实战重点代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ERROR: Cannot unpack
下一篇：简述get 和 post 的主要区别——