javascript实现点亮灯泡特效示例


Posted in Javascript onOctober 15, 2019

本文实例为大家分享了javascript实现点亮灯泡特效的具体代码,供大家参考,具体内容如下

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <meta name='description' content='本文来源于Apollo个人整理,仅供参考!'>
 <title>点亮灯泡</title>
 <style type="text/css">
  div{
   width: 500px;
   height: 400px;
   background-color:lightgoldenrodyellow;
  }

 </style>
</head>
<body>
 <div>
  <img id="demo" src="./pic_bulboff.gif" alt="灯泡">
 </div>
 <script>
  document.getElementById('demo').onclick = function () {
   ele = document.getElementById('demo');
   if (ele.src.match('bulbon')){
    ele.src = './pic_bulboff.gif';
   }else{
    ele.src = './pic_bulbon.gif';
   }
  }
 </script>
</body>
</html>

图片pic_bulboff.gif

javascript实现点亮灯泡特效示例

图片pic_bulbon.gif

javascript实现点亮灯泡特效示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
原生js实现回复评论功能
Jan 18 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
vue-cli 为项目设置别名的方法
Oct 15 #Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 #Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 #Javascript
微信小程序如何实现五星评价功能
Oct 15 #Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 #Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 #Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 #Javascript
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
浅谈PHP中的
2016/04/23 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python3设计模式之简单工厂模式
2017/10/17 Python
python统计中文字符数量的两种方法
2019/01/31 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Python列表推导式实现代码实例
2020/09/09 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
师范生教师实习自我鉴定
2013/09/27 职场文书
事业单位请假制度
2014/01/13 职场文书
学校门卫管理制度
2014/01/30 职场文书
岗位职责风险点
2014/03/12 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
文员求职信
2014/07/15 职场文书
庆祝国庆节标语
2014/10/09 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
matlab xlabel位置的设置方式
2021/05/21 Python
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫