HTML5实现点击触发灯泡开关

最新推荐文章于 2024-07-18 15:09:36 发布

m0_52239519

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量2.6k

点赞数 3

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_52239519/article/details/121317428

版权

效果图

在这里插入图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

代码

代码如下（示例）：

<!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 id="light" src="./jsimg/off.gif" alt="">
    <script>
    /*
    分析:
       1.获取图片元素的对象
       2.绑定单击事件
       3.每次点击切换图片
           规则：
             如果开的就变成关闭的
             如果关闭的，就变成亮的
          定义开关：flag   




    */
   //获取元素对象
   var img = document.getElementById("light");
   //开关
   var flag = false;
   //给对象绑定单机事件
   img.onclick = function () {
       //判断灯泡目前是开还是关
       if(flag){
        //灯泡是开的，把它变成关闭
        img.src="./jsimg/off.gif";
        flag = false;


       }else{
           //灯泡是关闭的，把它变成开的
           img.src="./jsimg/on.gif";
           flag = true;

       }





   }




    </script>
</body>
</html>

m0_52239519

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
HTML5实现点击触发灯泡开关

效果图提示：以下是本篇文章正文内容，下面案例可供参考代码代码如下（示例）：<!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,
复制链接

扫一扫