JavaScript实现灯泡开关切换特效

作者：异步漫步

时间：2026-10-23

本文介绍如何使用JavaScript实现灯泡点亮与熄灭的切换特效。通过监听点击事件，判断当前图片是否包含'bulbon'，动态切换src属性，实现灯泡亮灭状态的交互效果。

文章目录

JavaScript实现灯泡开关切换特效

本文通过一个具体示例，展示如何使用JavaScript实现灯泡点亮与熄灭的切换特效。代码包含HTML结构、CSS样式以及JavaScript逻辑，旨在为学习者提供参考。


<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <meta name='description' content='本文来源于Apollo个人整理,仅供参考!'>
 <title>点亮灯泡</title>
 <style type="text/css">
  div{
   width: 500px;
   height: 400px;
   background-color:lightgoldenrodyellow;
  }

 </style>
</head>
<body>
 <div>
  <img id="demo" src="./pic_bulboff.gif" alt="灯泡">
 </div>
 <script>
  document.getElementById('demo').onclick = function () {
   ele = document.getElementById('demo');
   if (ele.src.match('bulbon')){
    ele.src = './pic_bulboff.gif';
   }else{
    ele.src = './pic_bulbon.gif';
   }
  }
 </script>
</body>
</html>

图片pic_bulboff.gif

JavaScript实现灯泡开关切换特效