JavaScript實(shí)現(xiàn)電燈開關(guān)小案例

更新時(shí)間：2020年03月30日 15:23:53 作者：I Java

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)電燈開關(guān)小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天學(xué)習(xí)了JavaScript的一些簡(jiǎn)單知識(shí)，感覺(jué)挺有意思，僅僅通過(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="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，則開啟燈
   if(flag){
    //燈是開著的，關(guān)閉燈
    light.src = "img/off.gif";
    //修改燈的狀態(tài)（關(guān)閉狀態(tài)）
    flag = false;
   }else {
    //燈是關(guān)著的，開啟燈
    light.src = "img/on.gif";
    //修改燈的狀態(tài)（開啟狀態(tài)）
    flag = true;
   }
  }
 </script>
</body>
</html>

運(yùn)行效果：

案例素材：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS冷知識(shí)之不起眼但有用的String.raw方法
String.raw是JavaScript中模板字符串的一個(gè)標(biāo)簽函數(shù)，它的作用是將模板字符串不轉(zhuǎn)義的原始字符串內(nèi)容返回，接下來(lái)通過(guò)本文給大家介紹JS冷知識(shí)之不起眼但有用的String.raw方法,需要的朋友可以參考下
2022-06-06
完美實(shí)現(xiàn)js焦點(diǎn)輪播效果(二)（圖片可滾動(dòng)）
這篇文章主要為大家詳細(xì)介紹了完美實(shí)現(xiàn)js焦點(diǎn)輪播效果的相關(guān)代碼，采用輔助圖片實(shí)現(xiàn)圖片無(wú)限滾動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)圖片滾動(dòng)停止的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)圖片滾動(dòng)停止的方法,可實(shí)現(xiàn)js滾動(dòng)特效中的鼠標(biāo)懸停停止圖片滾動(dòng)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
Array.prototype.slice 使用擴(kuò)展
slice 可以用來(lái)獲取數(shù)組片段，它返回新數(shù)組，不會(huì)修改原數(shù)組。
2010-06-06
JS實(shí)現(xiàn)頁(yè)面加載完成之后自動(dòng)刷新一次問(wèn)題
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面加載完成之后自動(dòng)刷新一次問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
正則表達(dá)式中特殊符號(hào)及正則表達(dá)式的幾種方法總結(jié)(replace,test,search)
這篇文章主要是對(duì)正則表達(dá)式中特殊符號(hào)及正則表達(dá)式的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
詳解A標(biāo)簽中href=""的幾種用法
這篇文章主要介紹了a標(biāo)簽中href=""的幾種用法 ,需要的朋友可以參考下
2017-08-08
js switch case default 的用法示例介紹
switch case default的用法應(yīng)該存在一部分人不會(huì)使用吧，其實(shí)很簡(jiǎn)單就是每個(gè)case后，一定要加：break；default，就相當(dāng)于else，不會(huì)的朋友可以了解下
2013-10-10
一個(gè)html5播放視頻的video控件只支持android的默認(rèn)格式mp4和3gp
寫了個(gè)html5播放視頻的video控件，只支持mp4和3gp(android和ios默認(rèn)支持的格式就寫了這個(gè)) ,需要的朋友可以參考下
2014-05-05
ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能示例
這篇文章主要介紹了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能,結(jié)合實(shí)例形式分析了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05