位置: IT常识 - 正文
点击开关按钮，js实现电灯开关效果(按钮实现开关功能)
编辑：rootadmin点击开关按钮，js实现电灯开关效果 
本文链接地址:https://www.jiuchutong.com/zhishi/296148.html
转载请保留说明！
推荐整理分享点击开关按钮，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实现简易开关灯效果的小案例！大家可以试一试！