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

Logo

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

更多推荐