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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JS扩展方法实例分析
Apr 15 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 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实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
c++生成dll使用python调用dll的方法
2014/01/20 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
pandas.cut具体使用总结
2019/06/24 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
文秘自荐信
2013/10/20 职场文书
珠宝店促销方案
2014/03/21 职场文书
实习单位评语
2014/04/26 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
maven依赖的version声明控制方式
2022/01/18 Java/Android