JavaScript實(shí)現(xiàn)點(diǎn)擊元素變色效果
發(fā)布時(shí)間:2022-01-13 15:21 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 快樂(lè)小女

JavaScript實(shí)現(xiàn)點(diǎn)擊元素變色效果

視頻

案例為 8-11 點(diǎn)擊變色

JavaScript是一種功能強(qiáng)大的編程語(yǔ)言,簡(jiǎn)稱JS。已經(jīng)被廣泛用于Web應(yīng)用開(kāi)發(fā),常用來(lái)為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過(guò)嵌入在HTML中來(lái)實(shí)現(xiàn)自身的功能的。它是Web前端開(kāi)發(fā)的基石,每一個(gè)Web開(kāi)發(fā)人員必須掌握的編程技能。

JavaScript的執(zhí)行依賴于瀏覽器本身, 而與操作環(huán)境無(wú)關(guān)。只要是能運(yùn)行瀏覽器的計(jì)算機(jī),而該瀏覽器又支持 JavaScript,則腳本就可正確執(zhí)行。

1. 獲取元素,設(shè)置狀態(tài)  

var zxw = document.getElementsByClassName("zxw");

var abc = 1;

聲明變量時(shí)不需要指定數(shù)據(jù)類型,變量能隨著賦值不同自動(dòng)變換數(shù)據(jù)類型。

2. 獲取的所有元素綁定事件

for (var i=0;i<zxw.length;i++) {

zxw[i].onclick=function(){

//要執(zhí)行的代碼

};

};

使用循環(huán)語(yǔ)句運(yùn)行代碼多次,且每次使用不同的值,獲取的所有元素綁定事件

3.不同狀態(tài)執(zhí)行不同代碼

for (var i=0;i<zxw.length;i++) {

zxw[i].onclick=function(){

if (abc==1) {

//在事件中this指向了:當(dāng)前正在操作的元素

this.style.background="red";

abc=2;

} else{

this.style.background="blue";

abc=1;

};

};

};

使用條件語(yǔ)句,在不同狀態(tài)執(zhí)行不同代碼,并動(dòng)態(tài)改變當(dāng)前狀態(tài)。

需要注意:

1). 一個(gè)等號(hào)表示賦值,兩個(gè)等號(hào)才表示等于。

2). 在事件中this指向了當(dāng)前正在操作的元素,這一點(diǎn)非常重要。

至此我們就成功實(shí)現(xiàn)了點(diǎn)擊哪個(gè)元素,就讓哪個(gè)元素變色的效果,并可變化不同顏色。代碼稍微改變可實(shí)現(xiàn)圍棋效果。具體效果如下:

當(dāng)然在開(kāi)發(fā)過(guò)程中還有諸多需要注意的方面,比如頁(yè)面結(jié)構(gòu),樣式書寫,js的引入,循環(huán)退出條件等等,這些大家就在視頻中來(lái)尋找答案吧,我已經(jīng)作了詳細(xì)的講解。

JavaScript基礎(chǔ)教程
我要自學(xué)網(wǎng)商城 ¥45 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC