编程 Javascript

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

Posted in Javascript onJuly 08, 2019

本文实例讲述了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实现的开关灯泡点击切换特效示例

- Author -

webbc

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

网页常用特效代码整理

Jun 23 Javascript

JS模拟的QQ面板上的多级可展开的菜单

Oct 10 Javascript

js 文件引入实现代码

Apr 23 Javascript

jquery 文本上下无缝滚动,鼠标放上去就停止小例子

Jun 05 Javascript

深入理解Javascript里的依赖注入

Mar 19 Javascript

查找Oracle高消耗语句的方法

Mar 22 Javascript

动态显示可输入的字数提示还可以输入的字数

Apr 01 Javascript

jquery学习总结（超级详细）

Sep 04 Javascript

javascript动态添加删除tabs标签的方法

Jul 06 Javascript

分享JavaScript与Java中MD5使用两个例子

Dec 23 Javascript

JS获取时间的相关函数及时间戳与时间日期之间的转换

Feb 04 Javascript

详解在Vue中如何使用axios跨域访问数据

Jul 07 Javascript

JavaScript实现的联动菜单特效示例

Jul 08 #Javascript

vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

Jul 08 #Javascript

JavaScript定时器设置、使用与倒计时案例详解

Jul 08 #Javascript

Vue实现拖放排序功能的实例代码

Jul 08 #Javascript

JavaScript中Dom操作实例详解

Jul 08 #Javascript

JavaScript实现五子棋游戏的方法详解

Jul 08 #Javascript

ES6 Class中实现私有属性的一些方法总结

Jul 08 #Javascript

You might like

phpmailer发送gmail邮件实例详解

2013/06/24 PHP

php解析xml方法实例详解

2015/05/12 PHP

PHP SOCKET编程详解

2015/05/22 PHP

Yii框架中sphinx索引配置方法解析

2016/10/18 PHP

浅谈PHP表单提交(POST&GET&URL编/解码)

2017/04/03 PHP

基于PHP实现微信小程序客服消息功能

2019/08/12 PHP

extjs DataReader、JsonReader、XmlReader的构造方法

2009/11/07 Javascript

根据当前时间在jsp页面上显示上午或下午

2014/08/18 Javascript

javascript数组遍历for与for in区别详解

2014/12/04 Javascript

使用JavaScript开发IE浏览器本地插件实例

2015/02/18 Javascript

jQuery实用技巧必备（中）

2015/11/03 Javascript

JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

2016/08/05 Javascript

js实现文字选中分享功能

2017/01/25 Javascript

jquery使用EasyUI Tree异步加载JSON数据（生成树）

2017/02/11 Javascript

微信小程序本地数据读取实例

2017/04/27 Javascript

AngularJS创建一个上传照片的指令实例代码

2018/02/24 Javascript

微信小程序时间轴实现方法示例

2019/01/14 Javascript

使用Vue Composition API写出清晰、可扩展的表单实现

2020/06/10 Javascript

[01:05]主宰至宝剑心之遗

2017/03/16 DOTA

Python入门教程之运算符与控制流

2016/08/17 Python

Python使用迭代器捕获Generator返回值的方法

2017/04/05 Python

Python实现将16进制字符串转化为ascii字符的方法分析

2017/07/21 Python

Python 对输入的数字进行排序的方法

2018/06/23 Python

Python删除n行后的其他行方法

2019/01/28 Python

python实现银联支付和支付宝支付接入

2019/05/07 Python

Django 创建/删除用户的示例代码

2019/07/24 Python

Python3合并两个有序数组代码实例

2020/08/11 Python

一款纯css3实现的鼠标经过按钮特效教程

2014/11/09 HTML / CSS

Can a struct inherit from another struct? (结构体能继承结构体吗)

2016/09/25 面试题

工作交流会欢迎词

2014/01/12 职场文书

产品销售计划书

2014/05/04 职场文书

2015年体育部工作总结

2015/04/02 职场文书

2015年乡镇科普工作总结

2015/05/13 职场文书

简历中的自我评价怎么写呢？

2019/04/30 职场文书

公文写作：教你写“建议书”

2019/05/07 职场文书

浅谈Golang 嵌套 interface 的赋值问题

2021/04/29 Golang