JS小练习---开关灯泡

最新推荐文章于 2023-10-15 23:00:40 发布

不见蝴蝶不见君。

最新推荐文章于 2023-10-15 23:00:40 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/gabby____/article/details/81559053

这篇博客介绍了如何通过JavaScript来实现开关灯泡的交互效果。通过对元素的src属性进行匹配判断，当含有'bulbon'时切换为熄灭状态的图片，否则切换为开启状态的图片，从而达到切换灯泡图片的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>

<body>

<script>

function changeImage()

{

element=document.getElementById('myimage')

if (element.src.match("bulbon"))

  {
element.src="/i/eg_bulboff.gif";
  }

else

  {

  element.src="/i/eg_bulbon.gif";

  }

}

</script>

 <img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

 <p>点击灯泡来点亮或熄灭这盏灯</p>

 </body>

</html>

代码解析：

element.src.match("bulbon")意思是：Src路径里有bulbon匹配则为true.如果一开始的图片是/i/eg_bulbon.gif，那么就会匹配到bulbon，if语句为ture，执行if语句，图片转换为/i/eg_bulboff.gif；如果没匹配到bulbon，执行else语句，图片转换为/i/eg_bulbon.gif。这样就实现了用js对html图片的改变