• 售前

  • 售后

热门帖子
入门百科

js实现电灯开关效果

[复制链接]
韭菜555 显示全部楼层 发表于 2021-10-25 20:02:47 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了js实现电灯开关结果的具体代码,供各人参考,具体内容如下
通过对js的一个学习,我们来完成一个模仿电灯开关的小案例。
起首对本案例举行一个分析,过程如下:
1.获取图片属性
2.绑定单击事件
3.点击时切换图片
1.通过按钮实现电灯开关
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <img src="imgs/on.gif" alt="" id="img"> <br><!--图片-->
  9. <input type="button" id="bt1" value="开" onclick="f1()"><!--按钮-->
  10. <button id="bt2" onclick="f2()">关</button>
  11. </body>
  12. <script>
  13. function f1() {//开
  14. let bt1=document.getElementById("bt1");//获取按钮id
  15. let img=document.getElementById("img");//获取图片id
  16. img.src="imgs/on.gif";//修改图片
  17. }
  18. function f2() {//关
  19. let bt2=document.getElementById("bt2");
  20. let img=document.getElementById("img");
  21. img.src="imgs/off.gif";
  22. }
  23. </script>
  24. </html>
复制代码
运行结果:

2.通过点击电灯,实现开关
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <img src="imgs/off.gif" alt="" id="img"> <br>
  9. </body>
  10. <script>
  11. let img=document.getElementById("img");
  12. img.onclick=f;
  13. let flag=false;
  14. function f() {
  15. if (flag==true){
  16.   img.src="imgs/off.gif"
  17.   flag=false;
  18. }else {
  19.   img.src="imgs/on.gif"
  20.   flag=true;
  21. }
  22. }
  23. </script>
  24. </html>
复制代码
简化版(利用三元运算符)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <img src="imgs/on.gif" height="180" width="109" id="img" onclick="f()">
  9. </body>
  10. <script>
  11. let img = document.getElementById("img");
  12. let i=0;
  13. function f() {
  14. img.src='imgs/'+(++i%2==0?'off':'on')+'.gif';
  15. }
  16. </script>
  17. </html>
复制代码
运行结果
通过点击实现电灯的开关

电灯素材:

以上就是本文的全部内容,希望对各人的学习有所帮助,也希望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作