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

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

代码：

<!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. 初级程序员如何一分钟?解决一个BUG

    博主说明 -- 重要.重要.重要的事情说三遍 写这篇文章是主要锻炼写博客的能力以及记录自己的成长经历,要是写的不对欢迎大佬评论指正,同时希望对大家有所帮助.然后我写博客尽量简洁+图片+宏观的方式,便于 ...

  2. 2019-2020春江云暖你先知，CAE/EDA/高校等CloudHPC领域年均复合增长率超21%

    原创: 灵魂工作室 速石科技 我猜,我们是最早和你说春天来了的人. 一年前,我们还在小心谨慎地定义着Cloud HPC,一脸娇羞地拿Novartis 诺华制药在5年前做的案例当作标杆. 不久前,Hyp ...

  3. P4550 收集邮票

    P4550 收集邮票 题目描述 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的,概率均为1/n.但是由 ...

  4. 来自PTA Basic Level的三只小野兽

    点我阅读原文 最近利用闲暇时间做了一下 PTA Basic Level[1] 里的题,里面现在一共有 95 道题,这些题大部分很基础,对于刷倦了 leetcode 的小伙伴可以去里面愉快的玩耍哦. 这 ...

  5. Vue中使用js-xlsx导出Data数据到Excel

    需要引入的第三方JS有:export.js.xlsx.extendscript.js.xlsx.full.min.js JS太大不贴出来,放一个可下载百度云连接:https://pan.baidu.c ...

  6. VMware Workstation CentOS7 Linux 学习之路(1)--系统安装

      前言 很早就想学习Linux了,出去面试很多家公司都问会不会Linux,都很尴尬,一直没学过Linux,在网上也看过很多资料,也安装了VM,自己摸索着学习Linux,之前看网上的一些命令一顿操作, ...

  7. Java架构师中的内存溢出和内存泄露是什么？实际操作案例！

    JAVA中的内存溢出和内存泄露分别是什么,有什么联系和区别,让我们来看一看. 01 内存泄漏 & 内存溢出 1.内存泄漏(memory leak ) 申请了内存用完了不释放,比如一共有 102 ...

  8. 三分钟网络基础-IP地址分类

    IP 地址的编址方法共经过了三个历史阶段: 分类的 IP 地址 子网的划分 超网 这篇文章首先介绍,最初始的 IP 地址分类方法. 分类的 IP 将 IP 地址划分为若干个固定类,每一类地址都由两个固 ...

  9. python 线程池实用总结

    线程池的两张方法 submit 和map from concurrent.futures import ThreadPoolExecutor import time # def sayhello(a) ...

  10. [洛谷P4617] [COCI2017-2018#5] Planinarenje

    Description \(Mirko\) 和 \(Slavko\) 喜欢一起去远足. \(Mirko\) 偏好攀登山峰,而 \(Slavko\) 偏爱山谷.因此每次他们登上一座山峰后,\(Slavk ...