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

iis6+javascript Add an Extension File

Jun 13 Javascript

javascript:void(0)的真正含义实例分析

Aug 20 Javascript

IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点

Dec 27 Javascript

网页右侧悬浮滚动在线qq客服代码示例

Apr 28 Javascript

node.js中的http.get方法使用说明

Dec 14 Javascript

对JavaScript的全文搜索实现相关度评分的功能的方法

Jun 24 Javascript

Bootstrap每天必学之警告框插件

Apr 26 Javascript

JavaScript中重名的函数与对象示例详析

Sep 28 Javascript

详解使用Next.js构建服务端渲染应用

Jul 10 Javascript

关于单文件组件.vue的使用

Sep 20 Javascript

深入理解JavaScript 箭头函数

May 30 Javascript

JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】

Jan 04 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 无限分类三种方式非函数的递归调用！

2011/08/26 PHP

php获取目录所有文件并将结果保存到数组（实例）

2013/10/25 PHP

php 获取xml接口数据的处理方法

2018/05/31 PHP

CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）

2009/02/14 Javascript

jQuery DIV弹出效果实现代码

2009/07/03 Javascript

Bookmarklet实现启动jQuery(模仿云输入法)

2010/09/15 Javascript

jQuery 一个图片切换的插件

2011/10/09 Javascript

js改变鼠标的形状和样式的方法

2014/03/31 Javascript

JQ实现新浪游戏首页幻灯片

2015/07/29 Javascript

浅谈jquery的map()和each()方法

2016/06/12 Javascript

学习Node.js模块机制

2016/10/17 Javascript

JavaScript用二分法查找数据的实例代码

2017/06/17 Javascript

详解vue项目构建与实战

2017/06/27 Javascript

分析JS单线程异步io回调的特性

2017/12/01 Javascript

使用Angular CLI进行单元测试和E2E测试的方法

2018/03/24 Javascript

React 使用browserHistory项目访问404问题解决

2018/06/01 Javascript

ES6的异步终极解决方案分享

2019/07/11 Javascript

extjs4图表绘制之折线图实现方法分析

2020/03/06 Javascript

vue 函数调用加括号与不加括号的区别

2020/10/29 Javascript

解决vue-cli输入命令vue ui没效果的问题

2020/11/17 Javascript

jQuery实现购物车全功能

2021/01/11 jQuery

[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16

2018/08/17 DOTA

python中Switch/Case实现的示例代码

2017/11/09 Python

python识别验证码图片实例详解

2020/02/17 Python

Django 自定义权限管理系统详解(通过中间件认证)

2020/03/11 Python

Keras loss函数剖析

2020/07/06 Python

利用Python实现字幕挂载(把字幕文件与视频合并)思路详解

2020/10/21 Python

详解如何用HTML5 Canvas API控制图片的缩放变换

2016/03/22 HTML / CSS

APM Monaco中国官网：来自摩纳哥珠宝品牌

2017/12/27 全球购物

JD Sports瑞典：英国领先的运动时尚商店

2018/01/28 全球购物

Vero Moda西班牙官方购物网站：丹麦BESTSELLER旗下知名女装品牌

2018/04/27 全球购物

Java如何读取CLOB字段

2013/10/10 面试题

视光学专业毕业生推荐信

2013/10/28 职场文书

信息员培训方案

2014/06/12 职场文书

Java的Object类的九种方法

2022/04/13 Java/Android