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 arguments 传递给函数的隐含参数
Aug 21 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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 采集心得技巧
2009/05/15 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
python如何通过protobuf实现rpc
2016/03/06 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
SQL Server笔试题
2012/01/10 面试题
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
护士业务学习心得体会
2016/01/25 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL