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"> &盟敢势袂lt;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>