js实现电灯开关效果
这篇文章主要为大家详细介绍了js实现电灯开关效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现电灯开关效果的具体代码,供大家参考,具体内容如下
通过对js的一个学习,我们来完成一个模拟电灯开关的小案例。
首先对本案例进行一个分析,过程如下:
1.获取图片属性
2.绑定单击事件
3.点击时切换图片
1.通过按钮实现电灯开关
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!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.通过点击电灯,实现开关
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!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 > |
简化版(利用三元运算符)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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 > |
运行结果
通过点击实现电灯的开关
电灯素材:
以上就是本文的全部内容,希望对大家的学习有所帮助