编程 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 相关文章推荐

JavaScript立即执行函数的三种不同写法

Sep 05 Javascript

jQuery遍历之next()、nextAll()方法使用实例

Nov 08 Javascript

浅析AngularJS中的生命周期和延迟处理

Jun 18 Javascript

Node.js+Express配置入门教程详解

May 19 Javascript

JavaScript中的对象和原型(一)

Aug 12 Javascript

jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

Aug 15 Javascript

JS验证input输入框（字母，数字，符号，中文）

Mar 23 Javascript

node.js调用Chrome浏览器打开链接地址的方法

May 17 Javascript

node跨域请求方法小结

Aug 25 Javascript

JS滚轮控制图片缩放大小和拖动的实例代码

Nov 20 Javascript

怎样使你的 JavaScript 代码简单易读（推荐）

Apr 16 Javascript

vue全局使用axios的操作

Sep 08 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

php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置

2006/11/17 PHP

用缓存实现静态页面的测试

2006/12/06 PHP

PHP+Mysql+jQuery实现发布微博程序 jQuery篇

2011/10/08 PHP

ThinkPHP3.1新特性之Action参数绑定

2014/06/19 PHP

js 函数的副作用分析

2011/08/23 Javascript

关于jQuery参考实例 1.0 jQuery的哲学

2013/04/07 Javascript

ExtJS的拖拽效果示例

2013/12/09 Javascript

JavaScript对IE操作的经典代码(推荐)

2014/03/10 Javascript

JS及PHP代码编写八大排序算法

2016/07/12 Javascript

JS定时器实现数值从0到10来回变化

2016/12/09 Javascript

理解javascript中的闭包

2017/01/11 Javascript

微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）

2017/01/12 Javascript

JavaScript 详解预编译原理

2017/01/22 Javascript

nodejs连接mysql数据库及基本知识点详解

2018/03/20 NodeJs

vue基于mint-ui实现城市选择三级联动

2020/06/30 Javascript

js实现QQ邮箱邮件拖拽删除功能

2020/08/27 Javascript

vue项目配置同一局域网可使用ip访问的操作

2020/10/23 Javascript

vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

2021/02/26 Vue.js

Python实现获取操作系统版本信息方法

2015/04/08 Python

python简单判断序列是否为空的方法

2015/06/30 Python

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

2017/04/05 Python

python编程实现随机生成多个椭圆实例代码

2018/01/03 Python

Python3多线程爬虫实例讲解代码

2018/01/05 Python

Python使用pickle模块报错EOFError Ran out of input的解决方法

2018/08/16 Python

python爬虫 Pyppeteer使用方法解析

2019/09/28 Python

PYTHON发送邮件YAGMAIL的简单实现解析

2019/10/28 Python

django实现后台显示媒体文件

2020/04/07 Python

Python小白不正确的使用类变量实例

2020/05/29 Python

python matplotlib绘制三维图的示例

2020/09/24 Python

巴西食品补充剂在线零售商：Músculos na Web

2017/08/07 全球购物

企划专员岗位职责

2013/12/09 职场文书

幼儿园教师演讲稿

2014/05/06 职场文书

中国梦读书活动总结

2014/07/10 职场文书

入学证明

2015/06/23 职场文书

幼儿体育课教学反思

2016/02/16 职场文书

《艾尔登法环》1.03.3补丁上线碎星伤害调整

2022/04/07 其他游戏