初识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实现简易开关灯效果的小案例！大家可以试一试！

# javascript # 前端 # vue.js
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign