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

eclipse导入jquery包后报错的解决方法

Feb 17 Javascript

JSON中双引号的轮回使用过程中一定要小心

Mar 05 Javascript

javascript里使用php代码实例

Dec 13 Javascript

jquery实现简单文字提示效果

Dec 02 Javascript

JavaScript 闭包机制详解及实例代码

Oct 10 Javascript

微信小程序出现47001 data format error原因解决办法

Mar 10 Javascript

Vue多种方法实现表头和首列固定的示例代码

Feb 02 Javascript

关于ES6箭头函数中的this问题

Feb 27 Javascript

详解webpack4升级指南以及从webpack3.x迁移

Jun 12 Javascript

ES6 class的应用实例分析

Jun 27 Javascript

原生js实现点击轮播切换图片

Feb 11 Javascript

使用这 6个Vue加载动画库来减少我们网站的跳出率

May 18 Vue.js

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中通过语义URL防止网站被攻击的方法分享

2011/09/08 PHP

PHP 基于Yii框架中使用smarty模板的方法详解

2013/06/13 PHP

使用php伪造referer的方法利用referer防止图片盗链

2014/01/20 PHP

php post大量数据时发现数据丢失问题解决方法

2015/06/20 PHP

浅谈PHP链表数据结构(单链表)

2016/06/08 PHP

Yii框架学习笔记之session与cookie简单操作示例

2019/04/30 PHP

Js event事件在IE、FF兼容性问题

2011/01/01 Javascript

判断用户的在线状态 onbeforeunload事件

2011/03/05 Javascript

JavaScript的arguments对象应用示例

2014/09/15 Javascript

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

2014/12/14 Javascript

JS实现弹性漂浮效果的广告代码

2015/09/02 Javascript

jQuery获取同级元素的简单代码

2016/07/09 Javascript

深入分析javascript中console命令

2016/08/14 Javascript

什么是JavaScript中的结果值?

2016/10/08 Javascript

使用jsonp实现跨域获取数据实例讲解

2016/12/25 Javascript

详解Vue-基本标签和自定义控件

2017/03/24 Javascript

Iview Table组件中各种组件扩展的使用

2018/10/20 Javascript

详解如何用webpack4从零开始构建react开发环境

2019/01/27 Javascript

package.json中homepage属性的作用详解

2020/03/11 Javascript

小程序实现多个选项卡切换

2020/06/19 Javascript

Python批量转换文件编码格式

2015/05/17 Python

Python中的多行注释文档编写风格汇总

2016/06/16 Python

Python数据操作方法封装类实例

2017/06/23 Python

python opencv对图像进行旋转且不裁剪图片的实现方法

2019/07/09 Python

Python实现图片裁剪的两种方式(Pillow和OpenCV)

2019/10/30 Python

DRF框架API版本管理实现方法解析

2020/08/21 Python

手把手教你从PyCharm安装到激活（最新激活码），亲测有效可激活至2089年

2020/11/25 Python

基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)

2017/07/24 HTML / CSS

TripAdvisor日本：全球领先的旅游网站

2019/02/14 全球购物

人事主管岗位职责范本

2013/12/04 职场文书

求职意向书

2014/04/01 职场文书

机关门卫的岗位职责

2014/04/29 职场文书

党支部对照检查材料

2014/08/25 职场文书

商场父亲节活动方案

2014/08/27 职场文书

乡镇党的群众路线教育实践活动制度建设计划

2014/11/03 职场文书

详细聊聊关于Mysql联合查询的那些事儿

2021/10/24 MySQL