- 步驟分析
分析：
1.獲取圖片對象
2.綁定單擊事件
3.每次點擊切換圖片
* 規則：
* 如果燈是開的 on,切換圖片為 off
* 如果燈是關的 off,切換圖片為 on
* 使用標記flag來完成
圖片如下：
off.gif
on.gif
- 步驟實現
第一步：定義img標簽，指定電燈圖片
<img id="light" src="./img/on.gif">
第二步：定義一個方法，鼠標點擊，換電燈圖片
<script>
function fun(flag) {
// 1.獲取圖片對象
var light = document.getElementById("light");
// 2.綁定單擊事件
light.onclick = function() {
if(flag) { // 判斷如果燈是開的，則滅掉
light.src = "img/off.gif";
flag = false;
} else {
// 如果燈是滅的，則打開
light.src = "img/on.gif";
flag = true;
}
}
}
</script>
第三步：使用該方法
<script>
fun(true);
</script>
- 所有步驟代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電燈開關</title>
<script>
function fun(flag) {
// 1.獲取圖片對象
var light = document.getElementById("light");
// 2.綁定單擊事件
light.onclick = function() {
if(flag) { // 判斷如果燈是開的，則滅掉
light.src = "img/off.gif";
flag = false;
} else {
// 如果燈是滅的，則打開
light.src = "img/on.gif";
flag = true;
}
}
}
</script>
</head>
<body>
<img id="light" src="./img/on.gif">
<script>
fun(true);
</script>
</body>
</html>