本文实例为大家分享了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> <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实现倒计时提示框的具体代码,供大家参考,具体...
目录 读者基础 ?微服务架构梳理 https://www.coder4.com/homs_online/ ? ? 读者...
目录 1. C语言文件接口(库函数) 1.1 fopen 1.2 fclose 1.3 fread 1.4 fwrite 1.5...
今天看到个不错的网页播放器,感觉不错,大家可以测试 我写的一个播放器网页: ...
这5个PHP编程中的不良习惯,一定要改掉 PHP世界上最好的语言! 测试循环前数组是...
本文实例为大家分享了vue实现按钮切换图片的具体代码,供大家参考,具体内容如下...
由于固态驱动器(SSD)的速度比传统的硬盘驱动器(HDD)快得多,并且价格越来越便宜...
MFC项目在vs2017编译正常无报错,但是升级vs2019后一打开项目就报如下错误。 项...