用js控制電燈開關(guān)
利用js控制電燈開關(guān)，供大家參考，具體內(nèi)容如下
題目：通過(guò)js來(lái)控制電燈的開關(guān)
分析：獲取電燈泡元素，給它綁定點(diǎn)擊事件，通過(guò)鼠標(biāo)點(diǎn)擊來(lái)實(shí)現(xiàn)電燈泡的開關(guān)
實(shí)現(xiàn)方法：方法一：
獲取圖片元素，通過(guò)給按鈕綁定點(diǎn)擊事件來(lái)控制電燈開關(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://www.intensediesel.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://www.intensediesel.com/bcjs/img/開.gif' } close.onclick=function(){img.src='http://www.intensediesel.com/bcjs/img/關(guān).gif' }</script></html>
總結(jié)：這種方式比較簡(jiǎn)單，也不容易出錯(cuò)，通過(guò)按鈕綁定，直接獲取對(duì)應(yīng)的電燈開關(guān)圖片
運(yùn)行結(jié)果：
相關(guān)方法：
document.getElementById():通過(guò)id名獲取對(duì)應(yīng)的元素, document.getElementsByTagName():通過(guò)元素名獲取對(duì)應(yīng)的元素，獲取出來(lái)的是一個(gè)類數(shù)組對(duì)象 onclick：?jiǎn)螕羰录ㄟ^(guò)鼠標(biāo)點(diǎn)擊觸發(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://www.intensediesel.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://www.intensediesel.com/bcjs/img/關(guān).gif'; flag=false;}else{ img.src='http://www.intensediesel.com/bcjs/img/開.gif'; flag=true;} }</script></html>
注意：這種方法需要先做一個(gè)標(biāo)記（flag）來(lái)判斷電燈初始的狀態(tài)，直接給圖片綁定點(diǎn)擊事件的時(shí)候，需要注意標(biāo)記（flag）的初始賦值為false。
運(yùn)行結(jié)果：點(diǎn)擊電燈泡時(shí)，電燈明暗依次交替
相關(guān)圖片：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 得到XML文檔大小的方法2. WMLScript的語(yǔ)法基礎(chǔ)3. 使用Spry輕松將XML數(shù)據(jù)顯示到HTML頁(yè)的方法4. ASP中if語(yǔ)句、select 、while循環(huán)的使用方法5. xml中的空格之完全解說(shuō)6. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問題……7. 輕松學(xué)習(xí)XML教程8. html小技巧之td,div標(biāo)簽里內(nèi)容不換行9. XML入門的常見問題(四)10. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法
網(wǎng)公網(wǎng)安備