JavaScript實現電燈開關小案例
今天學習了JavaScript的一些簡單知識，感覺挺有意思，僅僅通過簡簡單單的幾行代碼就能模擬出生活中的一些應用場景，Interesting。比如我今天要寫的這個模擬電燈開關的小案例。
首先對本案例進行一個分析，過程如下：
1.獲取圖片對象
2.綁定單擊事件
3.每次點擊，切換圖片
切換規則：如燈是開著的，則切換圖片為off狀態，如果燈是關著的，則切換圖片為on狀態，燈的狀態用flag標記
代碼實現：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>電燈開關案例</title></head><body> <!--定義一個圖片標簽--> <img src='http://www.hdgsjgj.cn/bcjs/img/off.gif' alt=''> <script > //通過id屬性值獲取img標簽對象 var light = document.getElementById('light'); var flag = false; //定義一個燈的標記狀態，默認燈是關閉的 //綁定單擊事件 light.onclick = function () { //判斷燈的狀態，如果flag狀態為true，則關閉燈。如果flag狀態為false，則開啟燈 if(flag){ //燈是開著的，關閉燈 light.src = 'http://www.hdgsjgj.cn/bcjs/img/off.gif'; //修改燈的狀態（關閉狀態） flag = false; }else { //燈是關著的，開啟燈 light.src = 'http://www.hdgsjgj.cn/bcjs/img/on.gif'; //修改燈的狀態（開啟狀態） flag = true; } } </script></body></html>
運行效果：
案例素材：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備