点击开关按钮，js实现电灯开关效果

好喜欢前端

已于 2022-11-23 09:12:20 修改

阅读量6.1k

点赞数 6

文章标签： javascript 前端 vue.js

于 2022-11-22 19:41:57 首次发布

本文链接：https://blog.csdn.net/qq_53983648/article/details/127987982

版权

初识js，跟大家分享js实现电灯开关灯效果的具体代码，利用简单的html+js模拟电灯开关的小案例。

首先进行案例分析：

1.获取图片属性

2.判断变量的值

3.点击时切换图片

通过点击按钮实现电灯开关

以下是两张需要的图片，接下来添加html内容。

1.创建一个div，把亮的灯泡图片放入div，加入一个button按钮开关

<body>
<div class="box">
    <img id="img1" src="./img/on.png" height="180" width="109"/> <br>
    <button onclick="openOrClose()" >开/关</button>
</div>

</body>

2.设置js，定义一个变量。

首先获取元素

设置一个旗子f=true，true表示开，false表示关

判断变量的值来切换图片如果为ture则图片为亮的等，false为暗的灯。

<script>
    var img1 = document.getElementById("img1");
    var f=true;//true表示开，false表示关
    function openOrClose(){

        if(f){
            img1.src="./img/off.png"
            f=false
        }else {
            img1.src="./img/on.png"
            f=true
        }

    }
</script>

效果如下：

开关灯

另一种方法是js中的绑定点击事件来实现开关灯的效果，这个是实现页面整体变色的简易开关灯：

代码如下：

1.同样搭建好html样式，设置button按钮用来绑定点击事件

2.获取元素，同样设置一个变量，给button按钮设置绑定事件。


    <!-- 页面开关灯 -->
    <button type="button" class="btn">关灯</button>
    <script>
        //获取元素
        var btn = document.querySelector('.btn');
        var bd = document.body;
        //这里我们要先定义一个变量，给变量一个值为false；
        var flag = false;
        //给button按钮绑定点击事件
        btn.onclick = function() {
            flag = !flag  
            if (flag) {
                bd.style.backgroundColor = 'black';
                this.innerHTML = '开灯';
            } else {
                bd.style.backgroundColor = 'white';
                this.innerHTML = '关灯';
            } 
        }
     </script>

效果如下：

页面开关灯效果

以上就是利用ls实现简易开关灯效果的小案例！大家可以试一试！