js简单实现开关灯

最新推荐文章于 2023-05-15 19:36:36 发布

蓝玉小轩

最新推荐文章于 2023-05-15 19:36:36 发布

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：原生JS小案例文章标签： js javascript html css vscode

本文链接：https://blog.csdn.net/lanyu_er/article/details/119357983

原生JS小案例专栏收录该内容

5 篇文章

订阅专栏

js简单实现开关灯

原理：（更换图片）

首先定义开关按钮，通过给开关按钮添加点击事件，以更换图片的的方式实现控制开关灯的效果。

普通版：（两个开关，分别控制）

结构：两个按钮(button) + 一个图片(img)

样式：如代码(可根据自己爱好自行修改)

逻辑：对两个按钮分别添加点击事件，当点击开灯按钮时，将图片换成开灯状态的图片(注意图片的路径)，点击关灯按钮时，将图片换成关灯状态的图片。

<!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>
    //样式
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 500px;
        }
        img {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    //结构
    <div class="box">
        //两个按钮，分别控制开关
        <button class="btn1">开灯</button>
        <button class="btn2">关灯</button>
        //'./image/Dark.png'为图片的相对路径
        <img src="./image/Dark.png" alt="">
    </div>
    <script>
    	//获取标签
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var img = document.querySelector('img');
        //分别给开、关添加点击事件 更换图片
        btn1.onclick = function() {
            img.src = './image/light.png';
        }
        btn2.onclick = function() {
            img.src = './image/Dark.png';
        }
    </script>
</body>
</html>

plus版：(一个按钮，控制开关)

添加一个 bool 变量来记录当前灯的状态，通过条件分支语句实现对开关状态的判断，初始化开关状态为关(bool = false)，点击按钮时，如果当前开关状态为关(即 !bool == true)，则将图片更换为开灯状态的图片，否则换为关灯状态的图片，每次更换图片后，将 bool 的值取反来记录当前灯泡的状态。

<!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>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        button {
            position: absolute;
            top: 300px;
            left: 50%;
            margin-left: -22px;
            background-color: rgb(138, 220, 252);
            border-radius: 30%;
        }
        
        img {
            position: absolute;
            left: 50%;
            margin-left: -150px;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <button>开关</button>
    <img src="./image/Dark.png" alt="">
    <script>
    	//获取标签
        var btn = document.querySelector('button');
        var img = document.querySelector('img');
        //初始化开关状态
        var bool = false;
        btn.onclick = function() {
        	//如果当前开关状态为关(**即 !bool == true**)
        	//则将图片更换为开灯状态的图片，否则换为关灯状态的图片。
            if (!bool) {
                img.src = './image/light.png';
                bool = !bool; //记录当前开关状态
            } else {
                img.src = './image/Dark.png';
                bool = !bool; //记录当前开关状态
            }
        }
    </script>
</body>
</html>