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

来源：动视网责编：小采时间：2020-11-27 21:53:54

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

JavaScript实现的开关灯泡点击切换特效示例:本文实例讲述了JavaScript实现的开关灯泡点击切换特效。分享给大家供大家参考，具体如下：准备首先要准备两张图片，一张是灯泡亮的图片，取名为on.jpg，另一张是灭的图片，取名为off.jpg，都放置到当前的目录下。代码 <!DOCTYPE html&

推荐度：

点击下载本文 文档为doc格式

导读JavaScript实现的开关灯泡点击切换特效示例:本文实例讲述了JavaScript实现的开关灯泡点击切换特效。分享给大家供大家参考，具体如下：准备首先要准备两张图片，一张是灯泡亮的图片，取名为on.jpg，另一张是灭的图片，取名为off.jpg，都放置到当前的目录下。代码 <!DOCTYPE html&

本文实例讲述了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程序设计有所帮助。

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

推荐度：

点击下载本文 文档为doc格式

标签：实例 javascript 中示例

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐