JavaScript实现电灯开关控制的两种方法

作者：青柠

时间：2026-10-24

本文介绍利用JavaScript控制电灯开关的两种实现方式。方法一通过按钮绑定点击事件切换图片；方法二直接对图片绑定事件，利用flag标记判断状态。文章包含完整HTML/JS代码示例及关键API解析，适合初学者参考。

文章目录

本文分享利用JavaScript控制电灯开关的具体实现方案，供读者参考。

题目要求：

使用JavaScript实现电灯的开关控制功能。

思路分析：

核心逻辑是获取电灯泡对应的DOM元素，并为其绑定点击事件，从而通过鼠标点击操作触发电灯开关状态的切换。

具体实现方案：

方案一：

首先获取图片元素，随后为控制按钮绑定点击事件，通过按钮交互来控制电灯的开关状态。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电灯开关案例</title>
</head>
<body>
    <img src="./img/关.gif" alt="">
    <button id="open">开灯</button>
    <button id="close">关灯</button>
</body>
<script>
    var open=document.getElementById("open");
    var close=document.getElementById("close");
    var img=document.getElementsByTagName("img")[0];
    open.onclick=function(){
        img.src="./img/开.gif"
    }
    close.onclick=function(){
        img.src="./img/关.gif"
    }
</script>
</html>

总结：该方案逻辑简单且不易出错，通过为按钮绑定事件并直接获取对应的电灯开关图片资源即可完成控制。

运行效果：

题目要求：

涉及的关键方法：

document.getElementById()：根据指定的ID名称获取对应的DOM元素。
document.getElementsByTagName()：根据标签名获取元素，返回值是一个类数组对象。
onclick：单击事件，通过鼠标点击动作触发执行。

方案二：

获取图片元素后，直接为该图片绑定开关切换事件。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电灯开关案例</title>
</head>
<body>
    <img src="./img/关.gif" alt="">
</body>
<script>
    var img=document.getElementsByTagName("img")[0];
    var flag=false;
    img.onclick=function(){
        if(flag){
            img.src="./img/关.gif";
            flag=false;
        }else{
            img.src="./img/开.gif";
            flag=true;
        }
    }
</script>
</html>

注意事项：此方法需要引入一个标记变量（flag）来判断电灯的初始状态。在直接给图片绑定点击事件时，务必确保标记（flag）的初始值被正确赋值为false。

运行效果：点击电灯泡时，电灯会在明暗状态之间依次交替切换。