利用js控制電燈開關，供大家參考，具體內容如下
題目：
通過js來控制電燈的開關
分析：
獲取電燈泡元素，給它綁定點擊事件，通過鼠標點擊來實現電燈泡的開關
實現方法：
方法一：
獲取圖片元素，通過給按鈕綁定點擊事件來控制電燈開關
|
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>電燈開關案例</title></head><body> <img src="./img/關.gif" alt=""> <button id="open">開燈</button> <button id="close">關燈</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/開.gif" } close.onclick=function(){ img.src="./img/關.gif" }</script></html> |
總結：這種方式比較簡單，也不容易出錯，通過按鈕綁定，直接獲取對應的電燈開關圖片
運行結果：
相關方法：
- document.getElementById():通過id名獲取對應的元素,
- document.getElementsByTagName():通過元素名獲取對應的元素，獲取出來的是一個類數組對象
- onclick：單擊事件，通過鼠標點擊觸發
方法二：
獲取圖片元素，直接給圖片綁定開關事件
|
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>電燈開關案例</title></head><body> <img src="./img/關.gif" alt=""></body><script> var img=document.getElementsByTagName("img")[0]; var flag=false; img.onclick=function(){ if(flag){ img.src="./img/關.gif"; flag=false; }else{ img.src="./img/開.gif"; flag=true; } }</script></html> |
注意：這種方法需要先做一個標記（flag）來判斷電燈初始的狀態，直接給圖片綁定點擊事件的時候，需要注意標記（flag）的初始賦值為false。
運行結果：點擊電燈泡時，電燈明暗依次交替
相關圖片：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_45850095/article/details/115901492
