如何使用JavaScript来实现灯光开关的控制效果
|
在这篇文章中我们来了解一下“基于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。 运行结果：点击电灯泡时，电灯明暗依次交替。 “基于JS怎样实现控制电灯开关的效果？”的内容就介绍到这里了，感谢大家的阅读。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
