<!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. RMAN异机恢复步骤及故障处理

    一.測试机安装OS+Oracle Software.包含配置oracle用户.组和环境变量(略) 二.開始异机恢复 1. 复制源库最新备份集.初始化參数.password文件到測试机 [oracle@ ...

  2. ajaxform 提交，返回JSON时，IE提示下载的问题解决

    在使用AJAXform提交表单时,返回的数据格式为JSON,头文件是application/json 时,在 火狐.ie9和谷歌下都能正常解析,在ie7下会提示下载. 解决方法:指定返回页的头文件为& ...

  3. sqlserver利用链接服务器查询或同步本地数据库和远程数据库

    这个实际上是SQLserver的分布式查询:如果一个项目需要二至多台服务器,而我们又必须从几台服务器中将数据取出来,这就必须用分布式查询!在这里有两个概念:本地数据源.远程数据源!本地数据源指的是单个 ...

  4. libevent源码学习_event结构体

    在libevent中最重要的结构体莫过于event和event_base了,下面对于这2个结构体进行分析. 1.结构体event,位于:event.h struct event { /* * 双向链表 ...

  5. java的集合层次图

  6. Charles 的几个调试技巧

    Charles 是一个网络调试的代理工具,类似 Windows 下的 Fildder,这里介绍下几个常用的调试技巧,使用的版本是 Charles 4. 1.移动端抓包 在移动开发中,经常会遇到在手机上 ...

  7. python第三周文件处理和函数-----下

    #默认参数的值是在一开始定义的时候就传给了函数, # 在后来的修改中不会被修改. #默认参数的值必须放到位置形参参数的最后面 #默认参数使用的场景是一个参数不经常变得场景,所以参数一般是不可变类型.字 ...

  8. Java正则表达式之Matcher类的find和matches方法的区别

    讨论整个问题之前,先看个例子:   从上面的例子可以看出 matches()是整个字符串完全匹配时,才会返回true 而find()则只需要字符串中,找到某部分的子字符串匹配则返回true       ...

  9. Android.mk解析

    https://developer.android.com/ndk/guides/android_mk.html#over LOCAL_STATIC_LIBRARIES PREBUILT_STATIC ...

  10. Java sql server数据库连接成功

    import java.sql.Connection; import java.sql.SQLException; import java.sql.Statement; import java.sql ...