JavaScript實現(xiàn)電燈開關小案例
更新時間：2020年03月30日 15:23:53 作者：I Java
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)電燈開關小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天學習了JavaScript的一些簡單知識，感覺挺有意思，僅僅通過簡簡單單的幾行代碼就能模擬出生活中的一些應用場景，Interesting。比如我今天要寫的這個模擬電燈開關的小案例。
首先對本案例進行一個分析，過程如下：
1.獲取圖片對象
2.綁定單擊事件
3.每次點擊，切換圖片
切換規(guī)則：如燈是開著的，則切換圖片為off狀態(tài)，如果燈是關著的，則切換圖片為on狀態(tài)，燈的狀態(tài)用flag標記
代碼實現(xiàn)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電燈開關案例</title>
</head>
<body>
<!--定義一個圖片標簽-->
<img src="img/off.gif" id = "light" alt="">
<script >
//通過id屬性值獲取img標簽對象
var light = document.getElementById("light");
var flag = false; //定義一個燈的標記狀態(tài)，默認燈是關閉的
//綁定單擊事件
light.onclick = function () {
//判斷燈的狀態(tài)，如果flag狀態(tài)為true，則關閉燈。如果flag狀態(tài)為false，則開啟燈
if(flag){
//燈是開著的，關閉燈
light.src = "img/off.gif";
//修改燈的狀態(tài)（關閉狀態(tài)）
flag = false;
}else {
//燈是關著的，開啟燈
light.src = "img/on.gif";
//修改燈的狀態(tài)（開啟狀態(tài)）
flag = true;
}
}
</script>
</body>
</html>
運行效果：
案例素材：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
日常生活中，我們經常會見到形形色色的抽獎活動，例如九宮格、大轉盤等等……本文就來教大家如何利用JavaScript制作個簡單的大轉盤游戲，感興趣的可以了解一下2023-02-02
眾所周知echarts是一個純JavaScript的圖標庫,下面這篇文章主要給大家介紹了關于Echarts實例之樹形圖表的實現(xiàn)方法,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了JS獲取指定月份的天數(shù)兩種實現(xiàn)方法,需要的朋友可以參考下2018-06-06
今天在頁面上使用JS時發(fā)現(xiàn)無法通過W3C驗證,檢查了一會發(fā)現(xiàn)此方法可以屏蔽大多數(shù)JS無法通過驗證的問題，簡單實用2010-03-03
本文主要介紹了小程序上滑下滑效果的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
JavaScript仿靜態(tài)分頁實現(xiàn)方法
這篇文章主要介紹了JavaScript仿靜態(tài)分頁實現(xiàn)方法,可實現(xiàn)模擬靜態(tài)效果的分頁功能,并且可以控制分頁的字符數(shù),使用時可根據(jù)情況進行相應的字段修改即可,非常靈活實用,需要的朋友可以參考下2015-08-08
JavaScript實現(xiàn)可拖拽的拖動層Div實例
這篇文章主要介紹了JavaScript實現(xiàn)可拖拽的拖動層Div的方法,拖拽頁面中的div塊可實現(xiàn)div塊按照拖動軌跡移動的效果,涉及javascript鼠標事件、頁面元素樣式結合事件函數(shù)動態(tài)操作的相關技巧,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了淺談目前可以使用ES10的5個新特性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了JavaScript實現(xiàn)輪播圖效果代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
javascript實現(xiàn)保留兩位小數(shù)的多種方法
這篇文章主要介紹了javascript實現(xiàn)保留兩位小數(shù)的多種方法，如果數(shù)字的原本小數(shù)位數(shù)不到兩位，那么缺少的就自動補零，感興趣的小伙伴們可以參考一下2015-12-12