<!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. Android应用TranslateAnimation移动之后，利用视图的setLayoutPara

    Android中利用TranslateAnimation移动时,不设置mTranslateAnimation.setFillAfter(true);,而利用视图的setLayoutParams来重新定 ...

  2. LuaStudio编辑调试软件

    该编辑调试器最大特点就是能够注入到宿主程序内对lua脚本进行调试.还能够设置断点观察变量的值,功能很强大. 如今已有的编辑器有Notepad++, Editplus, luaforwindows, S ...

  3. MySQL 使用 比较函数 INTERVAL() 函数 实现数据按区间分组

    首先看一下它的定义: INTERVAL(N,N1,N2,N3,..........) INTERVAL()函数进行比较列表(N1,N2,N3等等)中的N值.该函数如果N<N1返回0,如果N< ...

  4. java 中 HashMap 遍历与删除

    HashMap的遍历 方法一.这是最常见的并且在大多数情况下也是最可取的遍历方式 /** * 在键值都需要时使用 */ Map<Integer, Integer> map = new Ha ...

  5. 详解TCP建立连接全过程

    TCP是因特网中的传输层协议,使用三次握手协议建立连接,下面是TCP建立连接的全过程. 上图画出了TCP建立连接的过程.假定主机A是TCP客户端,B是服务端.最初两端的TCP进程都处于CLOSED状态 ...

  6. Nginx使用naxsi防xss、防注入攻击配置

    == 对于nginx有相应模块来完成WAF构建,此处使用的是naxsi模块. == 一.安装前提 .必须安装了nginx并可提供基本服务(这个是添加模块儿的前提,自己google吧): .下载naxs ...

  7. 怎样正确写网站title、keywords、description比较标准。

    一.title title,也就是标题,是在浏览器上面显示出来的,方便用户了解这个页面的内容;特别是搜索引擎判断你网页内容的主要根据.搜索引擎就很大部分是依靠网站title来判断你网站是关于什么内容的 ...

  8. docker下部署spring boot

    第 5 章 Docker + Spring Boot: 快速搭建和部署Java Web应用 0.你需要: JDK 1.8 : java -version Maven 3.0+ : mvn -v Git ...

  9. Alluxio部署（local模式）

    下载(pre-build for Hadoop 2.7) http://www.alluxio.org/download` 解压 tar -xvf alluxio-1.3.0-hadoop2.7-bi ...

  10. jquery.cookie.js 使用小结

    先引入jquery,再引入:jquery.cookie.js 添加一个"会话cookie" $.cookie('the_cookie', 'the_value'); 这里没有指明 ...