JavaScript實現電燈開關小案例
阿新 • • 發佈：2020-04-02
今天學習了JavaScript的一些簡單知識，感覺挺有意思，僅僅通過簡簡單單的幾行程式碼就能模擬出生活中的一些應用場景，Interesting。比如我今天要寫的這個模擬電燈開關的小案例。
首先對本案例進行一個分析，過程如下：
1.獲取圖片物件
2.繫結單擊事件
3.每次點選，切換圖片
切換規則：如燈是開著的，則切換圖片為off狀態，如果燈是關著的，則切換圖片為on狀態，燈的狀態用flag標記
程式碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電燈開關案例</title>
</head>
<body>
<!--定義一個圖片標籤-->
<img src="img/off.gif" id = "light" alt="JavaScript實現電燈開關小案例">
<script >
//通過id屬性值獲取img標籤物件
var light = document.getElementById("light");
var flag = false; //定義一個燈的標記狀態，預設燈是關閉的
//繫結單擊事件
light.onclick = function () {
//判斷燈的狀態，如果flag狀態為true，則關閉燈。如果flag狀態為false，則開啟燈
if(flag){
//燈是開著的，關閉燈
light.src = "img/off.gif";
//修改燈的狀態（關閉狀態）
flag = false;
}else {
//燈是關著的，開啟燈
light.src = "img/on.gif";
//修改燈的狀態（開啟狀態）
flag = true;
}
}
</script>
</body>
</html>執行效果：
案例素材：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。