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程序设计有所帮助。

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