首页 > 编程 > JavaScript > 正文

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

2019-11-19 11:12:55
字体:
来源:转载
供稿:网友

本文实例讲述了JavaScript实现的开关灯泡点击切换特效。分享给大家供大家参考,具体如下:

准备

首先要准备两张图片,一张是灯泡亮的图片,取名为on.jpg,另一张是灭的图片,取名为off.jpg,都放置到当前的目录下。

代码

<!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程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表