<!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. ActiveMQ与MSMQ的异同

    http://www.cnblogs.com/luluping/archive/2010/11/03/1867841.html      目前常用的消息队列组建无非就是MSMQ和ActiveMQ,至于 ...

  2. asp.net mvc 重定向

    protected override void OnActionExecuting(ActionExecutingContext filterContext) { if (Request.Cookie ...

  3. Qt 推断一个IP地址是否有效

    QHostAddress test; if (!test.setAddress("111.111.111.1")) { ui->statusBar->showMessa ...

  4. leetcode_Power of Two_easy

    Given an integer, write a function to determine if it is a power of two. 题目意思:推断某个数是否是2的幂. 方法:直接进行bi ...

  5. onkeypress、onkeydown、onkeyup

    在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress.onkeydown.onkeyup三个事件进行出来.该三个事件的执行顺序如下:onkeydown -> onk ...

  6. iOS 集成微信支付【转载】

    目前项目里有微信支付的需求,调研过一段时间后,发现其实并没有想象中的那么困难.如果你只是想实现该功能,一个方法足以,但是若你想深入了解实现原理.就需要花费更多的功夫了.目前我只清楚微信支付需要做签名, ...

  7. jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页

    ※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public strin ...

  8. [Android]生成heap dump文件(.hprof)

    Android生成heap dump文件(.hprof) 一个heap dump就是一个程序heap的快照,能够获知程序的哪些部分正在使用大部分的内存. 它保存为一种叫做HPROF的二进制格式.对于A ...

  9. jquery省份城市选择器

    var pro = ["北京","天津","上海","重庆","河北","山西" ...

  10. MD5摘要（Java实现）

    消息摘要算法又成散列算法,其核心在于散列函数的单向性.即通过散列函数可获得对应的散列值,但不可以通过散列值反推其原始信息.   消息摘要算法分为以下三大类:       MD(Message Dige ...