初识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实现简易开关灯效果的小案例！大家可以试一试！
本文转载自: https://blog.csdn.net/qq_53983648/article/details/127987982
版权归原作者 好喜欢前端 所有， 如有侵权，请联系我们删除。
版权归原作者 好喜欢前端 所有， 如有侵权，请联系我们删除。