用js控制電燈開關(guān)
利用js控制電燈開關(guān)，供大家參考，具體內(nèi)容如下
題目：通過js來控制電燈的開關(guān)
分析：獲取電燈泡元素，給它綁定點擊事件，通過鼠標(biāo)點擊來實現(xiàn)電燈泡的開關(guān)
實現(xiàn)方法：方法一：
獲取圖片元素，通過給按鈕綁定點擊事件來控制電燈開關(guān)
<!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>電燈開關(guān)案例</title></head><body> <img src='http://m.4tl426be.cn/bcjs/img/關(guān).gif' alt=''> <button id='open'>開燈</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='http://m.4tl426be.cn/bcjs/img/開.gif' } close.onclick=function(){img.src='http://m.4tl426be.cn/bcjs/img/關(guān).gif' }</script></html>
總結(jié)：這種方式比較簡單，也不容易出錯，通過按鈕綁定，直接獲取對應(yīng)的電燈開關(guān)圖片
運行結(jié)果：
相關(guān)方法：
document.getElementById():通過id名獲取對應(yīng)的元素, document.getElementsByTagName():通過元素名獲取對應(yīng)的元素，獲取出來的是一個類數(shù)組對象 onclick：單擊事件，通過鼠標(biāo)點擊觸發(fā)方法二：
獲取圖片元素，直接給圖片綁定開關(guān)事件
<!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>電燈開關(guān)案例</title></head><body> <img src='http://m.4tl426be.cn/bcjs/img/關(guān).gif' alt=''></body><script> var img=document.getElementsByTagName('img')[0]; var flag=false; img.onclick=function(){if(flag){ img.src='http://m.4tl426be.cn/bcjs/img/關(guān).gif'; flag=false;}else{ img.src='http://m.4tl426be.cn/bcjs/img/開.gif'; flag=true;} }</script></html>
注意：這種方法需要先做一個標(biāo)記（flag）來判斷電燈初始的狀態(tài)，直接給圖片綁定點擊事件的時候，需要注意標(biāo)記（flag）的初始賦值為false。
運行結(jié)果：點擊電燈泡時，電燈明暗依次交替
相關(guān)圖片：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JavaScript設(shè)計模式之策略模式實現(xiàn)原理詳解2. idea設(shè)置代碼格式化的方法步驟3. Python tkinter制作單機五子棋游戲4. 八種Vue組件間通訊方式合集(推薦)5. GIT相關(guān)-IDEA/ECLIPSE工具配置的教程詳解6. Django Auth用戶認證組件實現(xiàn)代碼7. 完美實現(xiàn)CSS垂直居中的11種方法8. vue項目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決9. JSP頁面跳轉(zhuǎn)方法大全10. ASP中if語句、select 、while循環(huán)的使用方法
網(wǎng)公網(wǎng)安備