基于JS怎样实现控制电灯开关的效果？-群英

上一篇：小程序登录界面的实现代码怎样写？下一篇：React Native环境如何搭建，优缺点是什么

在这篇文章中我们来了解一下“基于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 >