---恢复内容开始---

模仿了网站的一个常见小功能，开关灯小功能。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>
window.onload=function(){
  var Omyimage=document.getElementById('myimage')
  var Obtn1=document.getElementById('btn1');
  var Obody=document.getElementById('Body');
  Obtn1.onclick= Omyimage.onclick= function ()
    {
      var  element=document.getElementById('myimage')
        if (element.src.match("bulbon"))
        {
            element.src="./img/bulboff.png";
            Obody.style.background='black';    
        }
        else
        {
            element.src="./img/bulbon.png";
            Obody.style.background='none';
        }
    }
}
</script>
<body id="Body">
<img id="myimage" src="./img/bulboff.png" width="100" height="180">
<button id="btn1" onclick="changeImage()">关灯</button>
</body>
</html>
 
运行截图：

可以用绑定body的id来实现控制整个文档流的背景颜色。

js笔记（2）--第一天记录的更多相关文章

  1. JS笔记 入门第一

    WHY? 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现 ...

  2. JS笔记之第一天

    JavaScript:简称JS JS的原名不是JavaScript,而是LiveScript JS分为三个部分 1.ECMAScript  标准→JS的基本的语法 2.DOM——Document Ob ...

  3. Stealth视频教程学习笔记（第一章）

    Stealth视频教程学习笔记(第一章) 本文是对Unity官方视频教程Stealth的学习笔记.在此之前,本人整理了Stealth视频的英文字幕,并放到了优酷上.本文将分别对各个视频进行学习总结,提 ...

  4. JavaScript笔记（第一章，第二章）

    JavaScript笔记(第一章,第二章) 第一章: <meta http-equiv="Content-Type" content="text/html; cha ...

  5. js笔记-0

    #js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...

  6. js笔记——js数据类型转换

    以下内容摘录自阮一峰的<语法概述 -- JavaScript 标准参考教程(alpha)>章节『数据类型转换』,以做备忘.更多内容请查看原文. JavaScript是一种动态类型语言,变量 ...

  7. 20145330《Java学习笔记》第一章课后练习8知识总结以及IDEA初次尝试

    20145330<Java学习笔记>第一章课后练习8知识总结以及IDEA初次尝试 题目: 如果C:\workspace\Hello\src中有Main.java如下: package cc ...

  8. 【基于spark IM 的二次开发笔记】第一天 各种配置

    [基于spark IM 的二次开发笔记]第一天 各种配置 http://juforg.iteye.com/blog/1870487 http://www.igniterealtime.org/down ...

  9. JS 获取本月第一天零点时间戳并转化成yy-mm-dd

    JS 获取本月第一天零点时间戳并转化成yy-mm-dd 格式 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  10. linq中分组查询而且获取每个分组中的第一条记录，数据用于分页绑定

    LINQ分组取出第一条数据 Person1: Id=1, Name="Test1" Person2: Id=1, Name="Test1" Person3: I ...

随机推荐

  1. Git 连接github

    大概如下: 详细如下:如果使用本文命令,请仔细选择,因为添加一些相关命令以供参考. 1 本地仓库 1.1 创建git 仓库 git init # 初始化本地仓库 git --version # 查看G ...

  2. 1050 螺旋矩阵 (25 分)C语言

    本题要求将给定的 N 个正整数按非递增的顺序,填入"螺旋矩阵".所谓"螺旋矩阵",是指从左上角第 1 个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为 m 行 ...

  3. （httpd、php）2

    (一)再说编译安装httpd2.4 新特性: 1:MPM(多处理模块)支持运行为DSO(动态共享,动态加载模式)机制,以模块形式按需加载,支持动态加载 2:event MPM生产环境可用 3:支持异步 ...

  4. DLC双端锁,CAS,ABA问题

    一.什么是DLC双端锁?有什么用处? 为了解决在多线程模式下,高并发的环境中,唯一确保单例模式只能生成一个实例 多线程环境中,单例模式会因为指令重排和线程竞争的原因会出现多个对象 public cla ...

  5. 手算CRC及其实现

    前言: 这篇文章主要讲的是如何手算CRC以及运用CRC,更侧重方法的步骤,对原理方面不做探讨. 方法也是按照我个人理解的来,所以并不专业~ 一些搬过来的代码我也修改了一下下 如果想了解原理的可参考资料 ...

  6. 使用gravatar生成头像

    avatar代表您在线的图像,当你与网站互动时,你的名字旁边会出现一张图片. Gravatar是一个全球通用的头像.你只需上传一次并创建自己的个人资料,然后当你加入任何支持Gravatar的网站时,你 ...

  7. Nginx安装目录讲解

    查看nginx相关目录 rpm -ql nginx 查看到如下目录 /etc/logrotate.d/nginx 配置文件 作用:nginx日志轮转,用于logrotate(轮替)服务的日志切割 /e ...

  8. 用ModelAndView返回视图结果返回的是对应RequestMapping拼接的路径

    今天,遇到一个贼坑的问题,就是我明明可以将逻辑视图名视图存入ModelAndView,结果返回的页面信息是RequestMapping拼接的视图解析路径,最后经过检查多遍代码,发现原来是ModelAn ...

  9. Ubuntu阿里镜像

    ubuntu 14.04: http://mirrors.aliyun.com/ubuntu-releases/14.04/ ubuntu 16.04: http://mirrors.aliyun.c ...

  10. Numpy科学计算从放弃到入门

    目录 一.什么是Numpy ndarray对象 相关文档 二.如何创建数组 三.如何访问数组 下标索引 切片索引 布尔型索引 整数索引 方形索引 四.如何做算数运算 五.如何使用统计函数 六.数组转置 ...