用js控制电灯开关
更新时间:2021年04月22日 15:08:25 作者:小苏(º﹃º )
这篇文章主要为大家详细介绍了用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="./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上传图片前的限制包括(jpg jpg gif及大小高宽)等
文件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件。使用JS可以轻松解决词问题,js在上传图片前判断大小 这个可以用javascript实现,效果2012-12-12
最新评论