<!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实例:点亮灯泡的更多相关文章

  1. JavaScript实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 一些有用的javascript实例分析(三)

    原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...

  9. 一些有用的javascript实例分析(一)

    原文:一些有用的javascript实例分析(一) 本文以http://fgm.cc/learn/链接的实例索引为基础,可参见其实际效果.分析和整理了一些有用的javascript实例,相信对一些初学 ...

随机推荐

  1. nginx sever_name正则

    nginx server_name 规则: 1.确切的server_name匹配 例如: server { listen ; server_name www.luwen.cc luwen.cc; .. ...

  2. HIVE中join、semi join、outer join

    补充说明 left outer join where is not null与left semi join的联系与区别:两者均可实现exists in操作,不同的是,前者允许右表的字段在select或 ...

  3. WIN10系统如何设置系统的护眼色

    小编的眼神不是很好,所以喜欢把电脑的各种文档的背景色设置成护眼色(就是在视觉效果看起来非常舒适的那种淡绿色) 方法/步骤     windows+R键调出运行窗口(或者鼠标右击开始键,选择运行)   ...

  4. 分布式服务框架 Zookeeper（四）官方编程指南

    握草,是不是加了官方两个字就可以唬人了. 使用ZooKeeper开发分布式应用 简介 这篇文档是为了那些想利用ZooKeeper的协调服务来构建分布式应用的开发人员而写滴,不相干的走一边去哈.在这儿有 ...

  5. uboot下tftp传输文件

    uboot下通过tftp工具传输文件,tftp与ftp是完全不同的工具或协议. 1) 下载并安装程序 sudo apt-get install tftp-hpa tftpd-hpa tftp-hpa是 ...

  6. 【转】Silverlight全开源工作流设计器

    声明 此工作流是作者自行构思和设计的被动式数据触发模式的工作流.没有遵循各种现有的工作流设计标准(如WFMC或WSFL),也没有与其他工作流通用性的接口规范.这里体现更多的是作者对工作流的使用思想,及 ...

  7. Eclipse 浏览(Navigate)菜单

    浏览 Eclipse 工作空间 浏览(Navigate)菜单提供了多个菜单可以让你快速定位到指定资源. 上图中 Open Type, Open Type in Hierarchy 和 Open Res ...

  8. 用VS2010进行CMAKE的时候“LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏”

    由于要编译LTP,LTP在MINGW下又不能编译,所以忍痛安装了VS2010+CMAKE. 由于VS在本科时候虐我千百遍,所以一直心存阴影... 转入正题,当cmake的时候, 它提示 “LINK : ...

  9. -webkit-transition: all .2s ease-in-out;

    W3C标准中对CSS3的transition这是样描述的:CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并 ...

  10. 强大的find命令

    find命令确实很强大,自己懒得计,转载一篇: 原文出处:http://roclinux.cn/?p=18 1. 想查看当前文件夹及子文件夹里有没有文件名为“abc”的文件 # find . -nam ...