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

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

代码：

<!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. C语言之while循环

    while循环能做什么??? 先来个概念格式,while循环的一般形式为: while(表达式){ 语句块 } 意思是,先计算"表达式"的值,当值为真(非0)时, 执行" ...

  2. 兄弟们，你们天天吊打面试官，面试官很难受啊。 metasploit免S客户端

    metasploit生成的exe文件很小,但是免杀效果不行, 找了很多资料, 只有生成c语言shellcode,然后c#重新编译, 这种免杀效果,挺让人满意的 首先需要生成客户端,客户端使用了ngro ...

  3. 来吧，一文彻底搞懂Java中的Comparable和Comparator

    大家好,我是沉默王二,今天在逛 programcreek 的时候,我发现了一些专注细节但价值连城的主题.比如说:Java 的 Comparable 和 Comparator 是兄弟俩吗?像这类灵魂拷问 ...

  4. model流程

    @RequestMapping("toDetail.do") public ModelAndView toDetail(HttpServletRequest request,Htt ...

  5. [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause报错问题的解决

    run SQL: select version(),@@sql_mode;SET sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY','' ...

  6. springboot2 整合redis

    1.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  7. 解决el-tree lazy懒加载时，连续勾选前两个子节点后第二次进入默认选中时，将父节点也勾选的问题

    在用到el-tree的懒加载和默认勾选功能时,若第一次勾选前几个连续节点,第二次进入默认勾选时,由于el-tree子节点尚未完全加载(只加载出来前几个),默认勾选已经开始(已加载出来的子节点被默认勾选 ...

  8. 线段树 or 并查集 （多一个时间截点）

    There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...

  9. 线段相交的异或值 （线段树 or 优先队列）

    VVQ 最近迷上了线段这种东西 现在他手上有 n 条线段,他希望在其中找到两条有公共点的线段,使得他们的异或值最大. 定义线段的异或值为它们并的长度减他们交的长度 输入描述: 第一行包括一个正整数 n ...

  10. docker-主从服务部署

    欢迎访问我的博客http://www.liyblog.top 我的博客里会有更详细的信息,而且留言必回,手把手给你解释不懂的地方   1.mysql部署   mysql镜像拉取 docker pull ...