案例：电灯开关

最新推荐文章于 2024-09-09 09:35:48 发布

给岁月以野蛮

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量27

点赞数

文章标签： javascript 前端 html 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_42356416/article/details/133114544

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif" alt="">
<script>
    /*
    * 分析
    * 1.获取对象
    * 2.绑定事件
    * 3.设置事件：每次点击切换图片
    *   规则：开——关，关——开
    *   使用flag来完成
    * */
    //1.获取对象
    var light = document.getElementById("light");
    var flag = false;//代表灯是灭的
    //2.绑定事件
    light.onclick = function () {
        if (flag) {
            //灯是开的就灭掉
            light.src = "img/off.gif";
            flag=false;
        } else {
            //灯是关的就打开
            light.src = "img/on.gif";
            flag=true;
        }
    }
</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

给岁月以野蛮

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例：电灯开关

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>电灯开关</title></head><body><img id="light" src="img/off.gif" alt=""&...
复制链接

扫一扫