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知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 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面向对象编程快速入门
2006/12/14 PHP
PHP中的extract的作用分析
2008/04/09 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
javascript 树形导航菜单实例代码
2013/08/13 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
详解node中创建服务进程
2017/05/09 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
js实现头像上传并且可预览提交
2020/12/25 Javascript
python实现批量修改文件名代码
2017/09/10 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
python语言的优势是什么
2020/06/17 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
汽车机修工岗位职责
2014/03/06 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
青奥会口号
2014/06/12 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
工作会议简报
2015/07/20 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书