js按钮点击事件开关灯亮（点击开关按钮，js实现电灯开关效果）
初识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实现简易开关灯效果的小案例！大家可以试一试！
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！