用js控制电灯开关
利用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='https://www.haobala.com/bcjs/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='https://www.haobala.com/bcjs/img/开.gif' } close.onclick=function(){img.src='https://www.haobala.com/bcjs/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='https://www.haobala.com/bcjs/img/关.gif' alt=''></body><script> var img=document.getElementsByTagName('img')[0]; var flag=false; img.onclick=function(){if(flag){ img.src='https://www.haobala.com/bcjs/img/关.gif'; flag=false;}else{ img.src='https://www.haobala.com/bcjs/img/开.gif'; flag=true;} }</script></html>
注意：这种方法需要先做一个标记（flag）来判断电灯初始的状态，直接给图片绑定点击事件的时候，需要注意标记（flag）的初始赋值为false。
运行结果：点击电灯泡时，电灯明暗依次交替
相关图片：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备