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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
javascript类型转换使用方法
Feb 08 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
javascript self对象使用详解
Oct 18 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 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 4.2书写安全的脚本
2006/10/09 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
Javascript 继承实现例子
2009/08/12 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
图解js图片轮播效果
2015/12/20 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python实现机器人行走效果
2018/01/29 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
参赛口号
2014/06/16 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
车辆委托书范本
2014/10/05 职场文书
教师求职信怎么写
2015/03/20 职场文书
导游词之云南丽江古城
2019/09/17 职场文书