用js控制電燈開關(guān)
利用js控制電燈開關(guān)，供大家參考，具體內(nèi)容如下
題目：通過js來控制電燈的開關(guān)
分析：獲取電燈泡元素，給它綁定點擊事件，通過鼠標點擊來實現(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.baoyu77737.com/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.baoyu77737.com/bcjs/img/開.gif' } close.onclick=function(){img.src='http://m.baoyu77737.com/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：單擊事件，通過鼠標點擊觸發(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.baoyu77737.com/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.baoyu77737.com/bcjs/img/關(guān).gif'; flag=false;}else{ img.src='http://m.baoyu77737.com/bcjs/img/開.gif'; flag=true;} }</script></html>
注意：這種方法需要先做一個標記（flag）來判斷電燈初始的狀態(tài)，直接給圖片綁定點擊事件的時候，需要注意標記（flag）的初始賦值為false。
運行結(jié)果：點擊電燈泡時，電燈明暗依次交替
相關(guān)圖片：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 10個提供免費PHP腳本下載的網(wǎng)站2. Java向Runnable線程傳遞參數(shù)方法實例解析3. python 爬取嗶哩嗶哩up主信息和投稿視頻4. Python編寫nmap掃描工具5. PHP設(shè)計模式（四）原型模式Prototype實例詳解【創(chuàng)建型】6. PHP擴展之APC——Alternative PHP Cache(可選PHP緩存)7. Java 基于UDP協(xié)議實現(xiàn)消息發(fā)送8. ASP.NET MVC前臺動態(tài)添加文本框并在后臺使用FormCollection接收值9. php5.6不能擴展redis.so的解決方法10. 如何基于python3和Vue實現(xiàn)AES數(shù)據(jù)加密
網(wǎng)公網(wǎng)安備