本篇文章为大家展示了利用JavaScript怎么实现一个电灯开关效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
首先对本案例进行一个分析,过程如下:
1.获取图片属性
2.绑定单击事件
3.点击时切换图片
1.通过按钮实现电灯开关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="imgs/on.gif" alt="" id="img"> <br><!--图片--> <input type="button" id="bt1" value="开" onclick="f1()"><!--按钮--> <button id="bt2" onclick="f2()">关</button> </body> <script> function f1() {//开 let bt1=document.getElementById("bt1");//获取按钮id let img=document.getElementById("img");//获取图片id img.src="imgs/on.gif";//修改图片 } function f2() {//关 let bt2=document.getElementById("bt2"); let img=document.getElementById("img"); img.src="imgs/off.gif"; } </script> </html>
运行结果:
2.通过点击电灯,实现开关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="imgs/off.gif" alt="" id="img"> <br> </body> <script> let img=document.getElementById("img"); img.onclick=f; let flag=false; function f() { if (flag==true){ img.src="imgs/off.gif" flag=false; }else { img.src="imgs/on.gif" flag=true; } } </script> </html>
简化版(利用三元运算符)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="imgs/on.gif" height="180" width="109" id="img" onclick="f()"> </body> <script> let img = document.getElementById("img"); let i=0; function f() { img.src='imgs/'+(++i%2==0?'off':'on')+'.gif'; } </script> </html>
上述内容就是利用JavaScript怎么实现一个电灯开关效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。