用js控制電燈開關
利用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>電燈開關案例</title></head><body> <img src='http://www.aoyou183.cn/bcjs/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='http://www.aoyou183.cn/bcjs/img/開.gif' } close.onclick=function(){img.src='http://www.aoyou183.cn/bcjs/img/關.gif' }</script></html>
總結：這種方式比較簡單，也不容易出錯，通過按鈕綁定，直接獲取對應的電燈開關圖片
運行結果：
相關方法：
document.getElementById():通過id名獲取對應的元素, document.getElementsByTagName():通過元素名獲取對應的元素，獲取出來的是一個類數組對象 onclick：單擊事件，通過鼠標點擊觸發方法二：
獲取圖片元素，直接給圖片綁定開關事件
<!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='http://www.aoyou183.cn/bcjs/img/關.gif' alt=''></body><script> var img=document.getElementsByTagName('img')[0]; var flag=false; img.onclick=function(){if(flag){ img.src='http://www.aoyou183.cn/bcjs/img/關.gif'; flag=false;}else{ img.src='http://www.aoyou183.cn/bcjs/img/開.gif'; flag=true;} }</script></html>
注意：這種方法需要先做一個標記（flag）來判斷電燈初始的狀態，直接給圖片綁定點擊事件的時候，需要注意標記（flag）的初始賦值為false。
運行結果：點擊電燈泡時，電燈明暗依次交替
相關圖片：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備