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 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JS实现一个简单的日历
Feb 22 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 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 email邮箱正则
2008/10/08 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
js调用css属性写法
2013/09/21 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue ssr 指南详读
2018/06/29 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
layUI的验证码功能及校验实例
2019/10/25 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Python实现最大子序和的方法示例
2019/07/05 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
保护环境建议书400字
2014/05/13 职场文书
单位工作证明
2014/10/07 职场文书
教师节祝酒词
2015/08/11 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
react 项目中引入图片的几种方式
2021/06/02 Javascript
改造DE1103三步曲
2022/04/07 无线电
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记