编程 Javascript

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

图片pic_bulbon.gif

javascript实现点亮灯泡特效示例

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

javascript实现点亮灯泡特效示例

- Author -

Apollo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js去空格技巧分别去字符串前后、左右空格

Oct 21 Javascript

javascript自定义函数参数传递为字符串格式

Jul 29 Javascript

Node.js中使用Log.io在浏览器中实时监控日志（等同tail -f命令）

Sep 17 Javascript

Jquery简单分页实现方法

Jul 24 Javascript

jQuery 判断图片是否加载完成方法汇总

Aug 10 Javascript

JS实现可展开折叠层的鼠标拖曳效果

Oct 09 Javascript

vuex实现简易计数器

Oct 27 Javascript

JS异步加载的三种实现方式

Mar 16 Javascript

详解vue 模版组件的三种用法

Jul 21 Javascript

Vue.js实现的购物车功能详解

Jan 27 Javascript

node中实现删除目录的几种方法

Jun 24 Javascript

vue源码中的检测方法的实现

Sep 26 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