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

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

代码：

<!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. Sublime Text 3 配置java程序运行环境

    最近在使用Java时,发现eclipse太耗电了,就想着用sublime text 3,要使用就要先配置,这是这个软件的特性,于是纠缠了一下午,网上流传很多配置运行java的文章,都没找到合适的(主要 ...

  2. 机器学习实战笔记（一）- 使用SciKit-Learn做回归分析

    一.简介 这次学习的书籍主要是Hands-on Machine Learning with Scikit-Learn and TensorFlow(豆瓣:https://book.douban.com ...

  3. 6.7 Mapreduce作业流JobControl和Oozie

    1.1  Mapreduce作业流JobControl和Oozie 更复杂的任务,需要多个mapreduce作业,形成作业流,而不是增加map和reduce的复杂度.复杂问题,可以用高级语言pig.h ...

  4. schedule of 2016-10-31~2016-11-6（Monday~Sunday）——1st semester of 2nd Grade

    most important things to do 1.joint phd preparations 2.journal paper to write 3.solid fundamental kn ...

  5. nor flash之擦除和写入

    最近研究了下nor flash的掉电问题,对nor的掉电有了更多的认识.总结分享如下 擦除从0变1,写入从1变0 nor flash的物理特性是,写入之前需要先进行擦除.擦除后数据为全0xFF,此时写 ...

  6. Selenium的简单使用

    selenium的使用对于新手来说十分友好,因为他避开了如今网络中的异步加载抓取的困扰,使得我们大部分的时间可以用于提取信息和存储中,下面就简单的列一些使用的代码,希望给同样初学的你有一定的参考价值. ...

  7. Activiti定时任务

    Activiti定时任务 作者:Jesai 傻逼一样的去坚持,就会有牛逼的结果 情景: 某公司有一个OA系统,审批环节是经理.有一天,经理出差了,然后下面突然有一份决定公司某个重大项目是否能顺利中标的 ...

  8. Python线程-死锁

    死锁产生的4个必要条件:    1.互斥:一个资源同一时刻只允许一个线程进行访问.    2.占有未释放:一个线程占有资源,且没有释放资源.    3.不可抢占:一个已经占有资源的线程无法抢占到其他线 ...

  9. 5.JavaSE之数据类型详解

    数据类型: 强类型语言: 要求变量的使用严格要求符合规定,写错了就不行,所有变量都必须先定义后才能使用,否则是不能使用的. 比如Java.C++都是强类型语言,也就是说,一旦定义了一个变量,只定义了某 ...

  10. springboot 报错nested exception is java.lang.IllegalStateException: Failed to check the status of the service xxxService No provider available for the service

    spring: dubbo:#关闭所有服务的启动时检查:(没有提供者时报错) consumer: check: false timeout: 3000