1.电灯开关

最新推荐文章于 2024-07-18 02:48:06 发布

夏来梦栀子

最新推荐文章于 2024-07-18 02:48:06 发布

阅读量101

点赞数 3

本文链接：https://blog.youkuaiyun.com/qq_52329552/article/details/118917223

版权

这篇博客通过JavaScript展示了如何实现一个简单的电灯开关交互效果，利用DOM操作和变量状态切换来控制图片显示，从而模拟灯的开与关。点击图片会根据当前灯的状态进行反转，实现了基本的用户交互功能。

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

电灯开关

<img id="light" src="91526d27fc3de00e472aa1063946cea7.jpg">
<script>
    /*
    获取图片对象
    绑定单机事件
    每次点击切换图片
        规则
            如果是开on切换为off
            如果是关off，切换图片为on
         使用标记flag完成
     */
    //获取图片对象
    var light = document.getElementById("light");
    var flag = false;//代表灯是灭的
    light.onclick = function () {
        if (flag) {
            light.src = "91526d27fc3de00e472aa1063946cea7.jpg";
            flag = false;
        } else {
            light.src = "QQ图片20200616184146.jpg";
            flag = true;
        }
    }
</script>