JavaScript原生开关灯效果

初学JavaScript的同学一定会做一个开光灯的作业，今天我就用JS中简单的if判断写一个开关灯的效果，供大家参考
一、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>

二、html代码

    <div id="box">
        <div id="img">
            <img src="开.png"/>                  <!-- 默认开灯效果，使用开灯效果的图片 -->                         
        </div>
        <button id="btn">关灯</button>           <!-- 关灯按钮 -->  
    </div>

三、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>

开关灯的图片我也上传上来了，大家可以保存后使用