JS小练习---开关灯泡

最新推荐文章于 2023-03-21 12:01:41 发布

不见蝴蝶不见君。

最新推荐文章于 2023-03-21 12:01:41 发布

阅读量1.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/gabby____/article/details/81559053

版权

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

摘要由CSDN通过智能技术生成

<!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，执行

最低0.47元/天解锁文章

不见蝴蝶不见君。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS小练习---开关灯泡

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;&lt;script&gt;function changeImage(){element=document.getElementById('myimage')if (element.src.match("bulbon")) {element.src="/i/eg_bulb...
复制链接

扫一扫

专栏目录