如何用JavaScript编写实现长尾词搜索功能的电灯开关效果？

2026-04-01 15:582阅读0评论SEO基础

内容介绍
文章标签
相关推荐

本文共计678个文字，预计阅读时间需要3分钟。

原文示例：本文实例为大家分享了js实现灯光开关效果的完整代码，供大家参考。通过对一个js的学习，我们来实现一个模拟灯光开关的小案例。首先对本案例进行一个分析，过程如下。

改写后：本文以实例形式展示了如何使用js实现灯光开关效果，并提供了相关代码供大家参考。通过学习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> <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>

运行结果

通过点击实现电灯的开关

电灯素材：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。

标签：实现电灯开关效果本文