<!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. Python中json.loads解析包含\n的字符串会出错

    用python中的json.loads解析字符串,失败了. [解决过程] 1.调试了半天,终于发现,如果把其中的: "呵呵加那么多连接啊\n\n这个标准还是不错的\n\n给大家推荐一个更多的 ...

  2. 使用NPOI读取Excel出错

    使用NPOI读取Excel出错,错误信息:java.io.IOException: Invalid header signature; read 4503608217567241, expected ...

  3. nginx sever_name正则

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

  4. js 判断浏览器内核

    function getOs()  {      var OsObject = "";     if(navigator.userAgent.indexOf("MSIE& ...

  5. silverlight RadGridView总结二（转载）

    系列二    实现RadGridView行中添加不同控件,并在控件中绑定不同的数据源    先上一段前台代码 <telerik:RadGridView Grid.Row="2" ...

  6. Redis之ZSet命令

    0.前言 Redis有序集合ZSet可以按分数进行排序, 存储结构可能使用ziplist,skiplist和hash表, zset_max_ziplist_entries和zset_max_zipli ...

  7. Java并发编程（二）为什么需要多线程

    如果不考虑多线程的话,那么在程序只有一条执行路径,代码串行执行:顺序执行.选择或者循环.单线程就像你用你惯常的手去写字,多线程编程就要求你左手画圆,右手画方.一不留神就会手忙脚乱,圆不是圆,方也不像方 ...

  8. ubuntu 中wget (下载)命令用法

    Linux wget是一个下载文件的工具,它用在命令行下. 对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器 1.使用wget下载单个文件 ...

  9. sqoop1.99.3配置过程

    感谢:http://www.myexception.cn/database/1600202.html 官网配置指导:http://sqoop.apache.org/docs/1.99.3/Instal ...

  10. 读汤姆大叔《深入理解javascript系列》笔记一编写高质量代码

    感觉大叔的博文真的是很不错 我打算严格要求自己 按照大叔说的,这样我就会更有规范,更有思想的去工作 去写代码(一入代码深似海)   1,尽可能的少用全局变量(污染全局空间,也会和别人的代码 发生冲突造 ...