本文通过三个逐步深入的案例演示如何使用JavaScript实现电灯开关效果。首先展示通过独立按钮控制图片源的方法，接着介绍点击灯泡本身利用布尔标志位切换状态的技巧，最后提供利用三元运算符简化逻辑的简洁实现。代码涵盖DOM获取、事件绑定及条件判断，适合初学者理解前端交互逻辑。
JavaScript实现电灯开关效果的三种方法
本文提供了一套使用JavaScript实现电灯开关交互效果的具体代码示例，供读者参考学习。
基于对JavaScript基础知识的掌握，本节将构建一个模拟电灯开关的简易案例。
在开始编码前，首先对该案例的实现逻辑进行梳理，主要步骤如下：
第一步，获取页面中图片元素的属性。
第二步，为相关元素绑定单击事件监听器。
第三步，在点击发生时，动态切换显示的图片资源。
通过按钮控制电灯开关
第一种实现方式：通过页面上的控制按钮来触发电灯的开关状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="imgs/on.gif" alt="" id="img"> <br><!--图片-->
<input type="button" id="bt1" value="开" onclick="f1()"><!--按钮-->
<button id="bt2" onclick="f2()">关</button>
</body>
<script>
function f1() {//开
let bt1=document.getElementById("bt1");//获取按钮id
let img=document.getElementById("img");//获取图片id
img.src="imgs/on.gif";//修改图片
}
function f2() {//关
let bt2=document.getElementById("bt2");
let img=document.getElementById("img");
img.src="imgs/off.gif";
}
</script>
</html>运行该代码后的效果如下：
点击电灯实现开关切换
第二种实现方式：直接点击电灯图片本身即可实现开关切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="imgs/off.gif" alt="" id="img"> <br>
</body>
<script>
let img=document.getElementById("img");
img.onclick=f;
let flag=false;
function f() {
if (flag==true){
img.src="imgs/off.gif"
flag=false;
}else {
img.src="imgs/on.gif"
flag=true;
}
}
</script>
</html>利用三元运算符简化实现
简化版实现：利用三元运算符优化代码逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="imgs/on.gif" height="180" width="109" id="img" onclick="f()">
</body>
<script>
let img = document.getElementById("img");
let i=0;
function f() {
img.src='imgs/'+(++i%2==0?'off':'on')+'.gif';
}
</script>
</html>简化版代码的运行结果如下：
最终效果为通过点击电灯图片实现开关状态的切换。
制作该效果所需的电灯素材图片如下：
以上就是本文介绍的全部内容，希望这些示例能对读者的学习有所帮助，同时也欢迎大家继续支持本站。