JavaScript实现灯泡开关点击切换特效

作者:微光时间:2026-10-23 09:28:07浏览:638

本文介绍如何使用JavaScript实现灯泡开关的点击切换特效。通过准备亮灭两张图片,利用DOM获取图片元素,监听点击事件判断当前状态并切换src属性,实现简单的交互效果。

JavaScript灯泡开关点击切换特效

本文通过一个具体实例,展示如何利用JavaScript编写灯泡开关的点击切换效果,供读者参考学习。

准备工作

准备工作

首先需要准备两张图片素材:一张表示灯泡点亮状态,命名为on.jpg;另一张表示灯泡熄灭状态,命名为off.jpg。将这两张图片放置在与HTML文件相同的目录下。

代码实现

代码实现


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script>
    function change(){
      var img = document.getElementById('img');
      var src = img.src;
      if(src.indexOf('on') >=0 ){
        img.src = 'off.jpg';
      }else{
        img.src = 'on.jpg';
      }
    }
  </script>
</head>
<body>
  <h1>开关灯泡</h1>
  <img id='img' src="on.jpg" onclick="change();" width='200' height="200">
</body>
</html>

运行效果

运行效果如下

JavaScript灯泡开关点击切换特效
JavaScript灯泡开关点击切换特效

如需了解更多JavaScript相关知识,可参考本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》。

希望本文提供的示例能对您的JavaScript程序设计有所帮助。

作者最新文章