用js控制電燈開關
阿新 • • 發佈：2021-04-25
利用js控制電燈開關，供大家參考，具體內容如下
題目：
通過js來控制電燈的開關
分析：
獲取電燈泡元素，給它繫結點選事件，通過滑鼠點選來實現電燈泡的開關
實現方法：
方法一：
獲取圖片元素，通過給按鈕繫結點選事件來控制電燈開關
<!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>電燈開
總結：這種方式比較簡單，也不容易出錯，通過按鈕繫結，直接獲取對應的電燈開關圖片
執行結果：
相關方法：
- document.getElementById():通過id名獲取對應的元素,
- document.getElementsByTagName():通過元素名獲取對應的元素，獲取出來的是一個類陣列物件
- onclick：單擊事件，通過滑鼠點選觸發
方法二：
獲取圖片元素，直接給圖片繫結開關事件
<!DOCTYPE html> <html lang="en"&http://www.cppcns.comgt; <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="用js控制電燈開關"> </body> <script> var img=document.getElementsByTagName("img")[0]; var flag=false; img.onclwww.cppcns.comick=function(){ if(flag){ img.src="./img/關.gif"; flag=false; }else{ img.src="./img/開.gif"; flag=true; } } </script> </html>
注意：這種方法需要先做一個標記（flag）來判斷電燈初始的狀態，直接給圖片繫結點選事件的時候，需要注意標記（flag）的初始賦值為false。
執行結果：點選電燈泡時，電燈明暗依次交替
相關圖片：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。