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