JavaScript原生开关灯效果

1、准备好开灯和关灯的图片

2、一、css样式

<style>

        *{margin: 0; padding:0;}

        #box{width:600px;height:600px;margin:auto;}

        #img{margin:auto;}

        #btn{margin-top:50px;width:80px;height:30px;}

    </style>

3、二、html代码

    <div id="box">

        <div id="img">

            <img src="开.png"/>                  <!-- 默认开灯效果，使用开灯效果的图片 -->                         

        </div>

        <button id="btn">关灯</button>           <!-- 关灯按钮 -->  

    </div>

4、三、javascript代码

<script>    

        var btn=document.getElementById('btn')

        var img=document.getElementById('img')

        btn.onclick=function(){

       if(btn.innerHTML=='关灯'){                          // 判断按钮如果是关灯   

            img.innerHTML='<img src="关.png"/>';          // 把图片换成关灯的图片

            btn.innerHTML='开灯';                        // 把按钮变成开灯

        }  

             else {                                     // 如果按钮不关灯

                 img.innerHTML='<img src="开.png"/>'   // 把图片换成开灯的图片

                 btn.innerHTML='关灯'                 // 把按钮变成关灯

        }

    }  

    </script>