<!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. Velocity写法注意

    1.$Proerty与$!{Property}的区别 比如: 简单的key-value数据格式情况下 a.<C_APP_NME>$Applicant_CAppNme</C_APP_N ...

  2. partial（类型）（C# 参考）

    通过分部类型可以定义要拆分到多个文件中的类.结构或接口. 如下: 在 File1.cs 中: namespace PC { partial class A { ; void MethodA() { } ...

  3. sublime text 3 修改侧边栏字体

    安装PackageResourceViewer快捷键 Ctrl+Shift+P 打开 Command Palette 输入 Package Control:Install 回车, 等待加载packag ...

  4. unity, UGUI Text fadeIn

    错误写法: Color color = m_text.GetComponent<Text> ().color;        Color startColor = new Color (c ...

  5. atitit.极光消息推送服务器端开发实现推送  jpush v3. 总结o7p

    atitit.极光消息推送服务器端开发实现推送  jpush v3. 总结o7p 1. 推送所设计到底功能1 1.1. 内容压缩1 1.2. 多引擎1 2. reg  ,设置appkey and pw ...

  6. PLSQL Developer 9注册码

    Product Code:46jw8l8ymfmp2twwbuur8j9gv978m2q2duserial Number:307254password:xs374ca

  7. java json字符串和对象互转

    /** * Created by admin on 2017/7/26. */ public class NewPost { private String title; private String ...

  8. iOS TableView索引字体大小设置

    -(void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger ...

  9. Debian run jar like a native program

    sudo apt install binfmt-support jarwrapper 比如 swagger-codegen wget -O ~/.local/bin/swagger-codegen h ...

  10. Unity Tiling和offset的使用

    offset是显示框的偏移量 1)拿flappy bird素材来说,起始状态是这种↓. 注意显示框(黄色).它包含的范围是这种↓ 2)当offset_x设置为0.5的时候,显示框(黄色)包含的范围应该 ...