利用js控制電燈開(kāi)關(guān)，供大家參考，具體內(nèi)容如下
題目：
通過(guò)js來(lái)控制電燈的開(kāi)關(guān)
分析：
獲取電燈泡元素，給它綁定點(diǎn)擊事件，通過(guò)鼠標(biāo)點(diǎn)擊來(lái)實(shí)現(xiàn)電燈泡的開(kāi)關(guān)
實(shí)現(xiàn)方法：
方法一：
獲取圖片元素，通過(guò)給按鈕綁定點(diǎn)擊事件來(lái)控制電燈開(kāi)關(guān)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>電燈開(kāi)關(guān)案例</title></head><body> <img src="./img/關(guān).gif" alt=""> <button id="open">開(kāi)燈</button> <button id="close">關(guān)燈</button></body><script> var open=document.getElementById("open"); var close=document.getElementById("close"); var img=document.getElementsByTagName("img")[0]; open.onclick=function(){ img.src="./img/開(kāi).gif" } close.onclick=function(){ img.src="./img/關(guān).gif" }</script></html> |
總結(jié)：這種方式比較簡(jiǎn)單，也不容易出錯(cuò)，通過(guò)按鈕綁定，直接獲取對(duì)應(yīng)的電燈開(kāi)關(guān)圖片
運(yùn)行結(jié)果：
相關(guān)方法：
- document.getElementById():通過(guò)id名獲取對(duì)應(yīng)的元素,
- document.getElementsByTagName():通過(guò)元素名獲取對(duì)應(yīng)的元素，獲取出來(lái)的是一個(gè)類數(shù)組對(duì)象
- onclick：?jiǎn)螕羰录ㄟ^(guò)鼠標(biāo)點(diǎn)擊觸發(fā)
方法二：
獲取圖片元素，直接給圖片綁定開(kāi)關(guān)事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>電燈開(kāi)關(guān)案例</title></head><body> <img src="./img/關(guān).gif" alt=""></body><script> var img=document.getElementsByTagName("img")[0]; var flag=false; img.onclick=function(){ if(flag){ img.src="./img/關(guān).gif"; flag=false; }else{ img.src="./img/開(kāi).gif"; flag=true; } }</script></html> |
注意：這種方法需要先做一個(gè)標(biāo)記（flag）來(lái)判斷電燈初始的狀態(tài)，直接給圖片綁定點(diǎn)擊事件的時(shí)候，需要注意標(biāo)記（flag）的初始賦值為false。
運(yùn)行結(jié)果：點(diǎn)擊電燈泡時(shí)，電燈明暗依次交替
相關(guān)圖片：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/qq_45850095/article/details/115901492
