怎么新建MySQL数据库
发布时间：2022-10-21
作者：admin
阅读：355
阅读：355
在这篇文章中我们来了解一下“基于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怎样实现控制电灯开关的效果？”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理