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

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

代码：

<!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. Linux 查看实时网卡流量的方法 sar nload iftop

    1.sar 计量脚本 sar(System Activity Reporter 系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告,包括:文件的读 ...

  2. CSRF 详解：攻击，防御，Spring Security应用等

    本文原创,更多内容可以参考: Java 全栈知识体系.如需转载请说明原处. CSRF(Cross-site request forgery跨站请求伪造,也被称成为"one click att ...

  3. Using TFRecords and tf.Example

    -----这篇其实是TensorFlow的官方tutorials,由于没有翻译,笔者姑且翻译一下,用来日后思考.------- 原址:https://www.tensorflow.org/tutori ...

  4. Redis 千万不要乱用KEYS命令，不然会挨打的

    Redis现如今使用的场景越来越多?如何批量删除key呢? 有人说用KEYS命令,刚开始学Redis的时候就是用这个命令列出库中键. KEYS命令要谨慎使用. 为何?客观别急,我们先一步步来看. KE ...

  5. 【FAR 方云研发绩效】助力于解决管理难题

    方云研发绩效(farcloud.com)自发布以来,助力多家企业完成研发管理数字化转型,并有效解决产研绩效这一普遍存在的管理难题. 研发管理是许多企业面临的管理难题,首先,技术构成的信息壁垒,让内部沟 ...

  6. Apache Hudi使用问题汇总（一）

    1.如何写入Hudi数据集 通常,你会从源获取部分更新/插入,然后对Hudi数据集执行写入操作.如果从其他标准来源(如Kafka或tailf DFS)中提取数据,那么DeltaStreamer将会非常 ...

  7. 最大区间和变形 - codeforces

    题意 : 可以选择操作一串区间,将区间内的某一个数全部变成一个新的数字,询问整个区间中某个数字的出现次数总共有多少个? 思路分析 : 首先最后选的一定是一个区间,然后 ans = cnt(1, l-1 ...

  8. 递推 dp - 求有多少个序列符合题意

    题目描述     小美有一个由n个元素组成的序列{a1,a2,a3,...,an},她想知道其中有多少个子序列{ap1,ap2,...,apm}(1 ≤ m ≤ n, 1 ≤ p1 < p2 , ...

  9. 算法笔记codeup-Contest100000568

    A #include <stdio.h> int main() { ; ; while(a) { sum=sum+a; a--; } printf("%d",sum); ...

  10. 加老板qq：804691342一起交流学习 致读者的话：曾经的我们很年少，现在我们要为理想的路疯狂的走下去。

    慕课网 实战班 就业班 2019年12月1号 更新资料整理 300套 新更课程 百度网盘资料链接: 链接:https://pan.baidu.com/s/1qORPsgM6ukDPOSjU5ck5yA ...