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

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

代码：

<!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. HDU3555 Bomb 题解 数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3555 题目大意:求 \([1,n]\) 范围内有多少数包含"49". 解题思路: ...

  2. 「学习笔记」动态规划 I『初识DP』

    写在前面 注意:此文章仅供参考,如发现有误请及时告知. 更新日期:2018/3/16,2018/12/03 动态规划介绍 动态规划,简称DP(Dynamic Programming) 简介1 简介2 ...

  3. MySQL之非空约束（NOT NULL）

    定义: MySQL非空约束(NOT NULL)可以通过 CREATE TABLE 或 ALTER TABLE 语句实现.在表中某个列的定义后加上关键字 NOT NULL 作为限定词,来约束该列的取值不 ...

  4. Vue.js项目在apache服务器部署后，刷新404的问题

    原因是vue-router 使用了路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = n ...

  5. java序列化（一）

    今天我们来探讨一下java的序列化与反序列化.之前对此一直有概念,但是并没有真正的去测试.大家都知道,所谓的序列化就是把java代码读取到一个文件中,反序列化就是从文件中读取出对象.在网络传输过程中, ...

  6. Linux学习_菜鸟教程_3

    我是在UBANTO上运行Linux的,开机启动时按下shift或者Esc都不能进入到grub,没有百度到可靠的教程. 暂时先这样吧.免得我把系统搞坏了,先学点实用的知识~~ Next Chapter

  7. 快到极致的Android模拟器——Genymotion

    转载声明:Ryan的博客文章欢迎您的转载,但在转载的同时,请注明文章的来源出处,不胜感激! :-)http://my.oschina.net/ryanhoo/blog/141824 还在用Androi ...

  8. Asp.Net Core下的开源任务调度平台ScheduleMaster—快速上手

    概述 ScheduleMaster是一个开源的分布式任务调度系统,它基于Asp.Net Core平台构建,支持跨平台多节点部署运行. 它的项目主页在这里: https://github.com/hey ...

  9. target 和 currentTarget的区别

    target是当前点击的组件,currentTarget是扑捉到事件的组件

  10. 【PCIE-3】---PCIE设备的枚举扫描（经典好文）

    前面两个小节大致总结了下PCIE的基本知识,算是扫盲篇吧.本文主要总结PCIE设备的枚举扫描过程,此部分才是PCIE模块的重点,无论是在BIOS下还是系统驱动下都会用到. 按照国际惯例,先列问题: 1 ...