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动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
微信小程序调用微信支付接口的实现方法
Apr 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php 无限极分类
2008/03/27 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
vue二级路由设置方法
2018/02/09 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
python pdb调试方法分享
2014/01/21 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
python如何安装下载后的模块
2020/07/03 Python
python如何运行js语句
2020/09/09 Python
python 自动识别并连接串口的实现
2021/01/19 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
快餐店的创业计划书范文
2014/01/29 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
Python实现归一化算法详情
2022/03/18 Python