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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
typescript编写微信小程序创建项目的方法
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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP面向对象编程快速入门
2006/10/09 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php对称加密算法示例
2014/05/07 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
浅谈php调用python文件
2019/03/29 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
基于IView中on-change属性的使用详解
2018/03/15 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
利用Python获取操作系统信息实例
2016/09/02 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
运动会100米广播稿
2015/08/19 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python