利用js控制电灯开关，供大家参考，具体内容如下
题目：
通过js来控制电灯的开关
分析：
获取电灯泡元素，给它绑定点击事件，通过鼠标点击来实现电灯泡的开关
实现方法：
方法一：
获取图片元素，通过给按钮绑定点击事件来控制电灯开关
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >电灯开关案例</ title >
</ head >
< body >
< img src = "./img/关.gif" alt = "" >
< button id = "open" >开灯</ button >
< button id = "close" >关灯</ button >
</ body >
< script >
var open=document.getElementById("open");
var close=document.getElementById("close");
var img=document.getElementsByTagName("img")[0];
open.onclick=function(){
img.src="./img/开.gif"
}
close.onclick=function(){
img.src="./img/关.gif"
}
</ script >
</ html >
总结：这种方式比较简单，也不容易出错，通过按钮绑定，直接获取对应的电灯开关图片
运行结果：
相关方法：
document.getElementById():通过id名获取对应的元素, document.getElementsByTagName():通过元素名获取对应的元素，获取出来的是一个类数组对象 onclick：单击事件，通过鼠标点击触发方法二：
获取图片元素，直接给图片绑定开关事件
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >电灯开关案例</ title >
</ head >
< body >
< img src = "./img/关.gif" alt = "" >
</ body >
< script >
var img=document.getElementsByTagName("img")[0];
var flag=false;
img.onclick=function(){
if(flag){
img.src="./img/关.gif";
flag=false;
}else{
img.src="./img/开.gif";
flag=true;
}
}
</ script >
</ html >
注意： 这种方法需要先做一个标记（flag）来判断电灯初始的状态，直接给图片绑定点击事件的时候，需要注意标记（flag）的初始赋值为false。
运行结果：点击电灯泡时，电灯明暗依次交替
相关图片：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_45850095/article/details/115901492