JavaScript實(shí)現(xiàn)電燈開關(guān)小案例
今天學(xué)習(xí)了JavaScript的一些簡(jiǎn)單知識(shí)，感覺挺有意思，僅僅通過(guò)簡(jiǎn)簡(jiǎn)單單的幾行代碼就能模擬出生活中的一些應(yīng)用場(chǎng)景，Interesting。比如我今天要寫的這個(gè)模擬電燈開關(guān)的小案例。
首先對(duì)本案例進(jìn)行一個(gè)分析，過(guò)程如下：
1.獲取圖片對(duì)象
2.綁定單擊事件
3.每次點(diǎn)擊，切換圖片
切換規(guī)則：如燈是開著的，則切換圖片為off狀態(tài)，如果燈是關(guān)著的，則切換圖片為on狀態(tài)，燈的狀態(tài)用flag標(biāo)記
代碼實(shí)現(xiàn)：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>電燈開關(guān)案例</title></head><body> <!--定義一個(gè)圖片標(biāo)簽--> <img src='http://www.b3g6.com/bcjs/img/off.gif' alt=''> <script > //通過(guò)id屬性值獲取img標(biāo)簽對(duì)象 var light = document.getElementById('light'); var flag = false; //定義一個(gè)燈的標(biāo)記狀態(tài)，默認(rèn)燈是關(guān)閉的 //綁定單擊事件 light.onclick = function () { //判斷燈的狀態(tài)，如果flag狀態(tài)為true，則關(guān)閉燈。如果flag狀態(tài)為false，則開啟燈 if(flag){ //燈是開著的，關(guān)閉燈 light.src = 'http://www.b3g6.com/bcjs/img/off.gif'; //修改燈的狀態(tài)（關(guān)閉狀態(tài)） flag = false; }else { //燈是關(guān)著的，開啟燈 light.src = 'http://www.b3g6.com/bcjs/img/on.gif'; //修改燈的狀態(tài)（開啟狀態(tài)） flag = true; } } </script></body></html>
運(yùn)行效果：
案例素材：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. idea重置默認(rèn)配置的方法步驟2. idea給項(xiàng)目打war包的方法步驟3. IntelliJ IDEA設(shè)置自動(dòng)提示功能快捷鍵的方法4. IntelliJ IDEA安裝插件的方法步驟5. IntelliJ IDEA設(shè)置背景圖片的方法步驟6. idea 打包的jar運(yùn)行報(bào) "XXX中沒有主清單屬性"7. Docker 部署 Prometheus的安裝詳細(xì)教程8. idea打開多個(gè)窗口的操作方法9. IntelliJ IDEA調(diào)整字體大小的方法10. IntelliJ IDEA刪除類的方法步驟
網(wǎng)公網(wǎng)安備