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

DOM下的节点属性和操作小结

May 14 Javascript

Prototype 工具函数学习

Jul 23 Javascript

javascript一个无懈可击的实例化XMLHttpRequest的方法

Oct 13 Javascript

js 自动播放的实例代码

Nov 19 Javascript

调整小数的格式保留小数点后两位

May 14 Javascript

轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车

Nov 30 Javascript

JavaScript基础篇（6）之函数表达式闭包

Dec 11 Javascript

AngularJS 工作原理详解

Aug 18 Javascript

jQuery实现的图片轮播效果完整示例

Sep 12 Javascript

实例解析angularjs的filter过滤器

Dec 14 Javascript

使用JS 插件qrcode.js生成二维码功能

Feb 20 Javascript

React.Js添加与删除onScroll事件的方法详解

Nov 03 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 如何获取二维数组中某个key的集合

2014/06/03 PHP

PHP队列用法实例

2014/11/05 PHP

php下Memcached入门实例解析

2015/01/05 PHP

php获取本机真实IP地址实例代码

2016/03/31 PHP

JQuery获取浏览器窗口内容部分高度的代码

2012/02/24 Javascript

js实现幻灯片播放图片示例代码

2013/11/07 Javascript

jquery 字符串切割函数substring的用法说明

2014/02/11 Javascript

jquery实现页面关键词高亮显示的方法

2015/03/12 Javascript

javascript实现的固定位置悬浮窗口实例

2015/04/30 Javascript

深入理解js promise chain

2016/05/05 Javascript

JavaScript ES6的新特性使用新方法定义Class

2016/06/28 Javascript

基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

2016/08/11 Javascript

jQuery插件实现可输入和自动匹配的下拉框

2016/10/24 Javascript

使用Browserify来实现CommonJS的浏览器加载方法

2017/05/14 Javascript

jQuery实现输入框的放大和缩小功能示例

2018/07/21 jQuery

ES6入门教程之Array.from()方法

2019/03/23 Javascript

vue单页面在微信下只能分享落地页的解决方案

2019/04/15 Javascript

JS中实现浅拷贝和深拷贝的代码详解

2019/06/05 Javascript

原生js实现简单轮播图

2020/10/26 Javascript

Python 列表排序方法reverse、sort、sorted详解

2016/01/22 Python

解决python3运行selenium下HTMLTestRunner报错的问题

2018/12/27 Python

Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式

2020/01/10 Python

PyTorch笔记之scatter()函数的使用

2020/02/12 Python

PyCharm 无法 import pandas 程序卡住的解决方式

2020/03/09 Python

Auchan Direct波兰：欧尚在线杂货店

2016/10/19 全球购物

意大利网上购书网站：Libraccio.it

2021/02/03 全球购物

《掌声》教学反思

2014/02/23 职场文书

公司年会策划方案

2014/05/17 职场文书

党员服务承诺书

2014/05/28 职场文书

管理岗位竞聘演讲稿

2014/08/18 职场文书

三八妇女节寄语

2015/02/27 职场文书

2015年大学班主任工作总结

2015/04/30 职场文书

2019下半年英语教师的教学工作计划（3篇）

2019/09/25 职场文书

如何获取numpy array前N个最大值

2021/05/14 Python

分位数回归模型quantile regeression应用详解及示例教程

2021/11/02 Python