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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
jquery实现上传图片功能
Jun 29 jQuery
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全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
python中的常量和变量代码详解
2018/07/25 Python
Python多进程fork()函数详解
2019/02/22 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
python如何操作mysql
2020/08/17 Python
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
医学生实习自荐信
2013/10/01 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
武侯祠导游词
2015/02/04 职场文书