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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
laydate时间日历插件使用方法详解
Nov 14 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
第七节--类的静态成员
2006/11/16 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
JS模拟按钮点击功能的方法
2015/12/22 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python滑块验证码的破解实现
2019/11/10 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
印度低票价航空公司:GoAir
2017/10/11 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
会计找工作求职信范文
2013/12/09 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
工人先进事迹材料
2014/12/26 职场文书
欢送领导祝酒词
2015/08/12 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
MongoDB数据库之添删改查
2022/04/26 MongoDB