JavaScript模拟实现电灯开关小案例 -----Jane Eyre

最新推荐文章于 2022-06-27 13:41:07 发布

原创最新推荐文章于 2022-06-27 13:41:07 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JS

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的电灯开关模拟案例。通过简单的代码，我们能够在网页上创建一个可以开关的电灯图片，每次点击图片，电灯的状态就会在开和关之间切换。案例详细介绍了代码的实现过程，包括获取图片对象、绑定单击事件和切换图片状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习了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="">

    <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>

运行效果：

案例素材：