开关灯案例

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

weixin_lqq

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

阅读量102

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_52119040/article/details/119136831

版权

笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!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>Document</title>
</head>
<body>
    <img src="./images/a.png" alt="">
    <button>开灯</button>
</body>
</html>

<script>
        let btn = document.querySelector('button')
        let pic = document.querySelector('img')
        // 点击开关,灯亮或灯灭,即更换灯泡的图片
        // 定义一个flag变量表示灯亮还是灯灭
        let flag = true
        btn.addEventListener('click',function () {
          // 如果flag为true,则表示灯灭,更换为灯亮的图片,同时切换文字和flag值
            if(flag) {
                pic.src = './images/b.png'
                btn.innerHTML = '关灯'
                flag = false
            } else {
                pic.src = './images/a.png'
                btn.innerHTML = '开灯'
                flag = true
            }
          })

          
        // 鼠标移入灯亮,鼠标离开灯灭
        pic.addEventListener('mouseenter',function () {
            pic.src = './images/b.png'
          })
        pic.addEventListener('mouseleave',function () {
          pic.src = './images/a.png'
        })
    </script>

weixin_lqq

关注

0
点赞
踩
0

收藏

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

<!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>Doc
复制链接

扫一扫