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ì)的講解。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。