JS实现简单电灯开关的代码示例
发布时间：2022-04-20 09:05:05 所属栏目：语言 来源：互联网
导读：我们学习了JS 之后，能够用JS实现很多有意思的炫酷效果。这篇文章就给大家分享一个模拟电灯开关的小案例，生活中，我们用手一按就可以让电灯亮起和熄灭，下面我们来看看如何用JS实现点灯开关效果。 首先对本案例进行一个分析，过程如下： 1.获取图片属性 2.
|
我们学习了JS 之后，能够用JS实现很多有意思的炫酷效果。这篇文章就给大家分享一个模拟电灯开关的小案例，生活中，我们用手一按就可以让电灯亮起和熄灭，下面我们来看看如何用JS实现点灯开关效果。 首先对本案例进行一个分析，过程如下： 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> </script> </html> 运行结果 通过点击实现电灯的开关 以上就是js实现电灯开关效果的具体代码展示，是不是很简单？感兴趣的朋友可以自己来实现下这个效果。 （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
