就是男默女泪的立flag!

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .video-box{

             width: 1000px;

             height: 500px;

             background-color: skyblue;

             margin: 50px auto;

         }

         body.night{

             background-color: #333;

             color: #fff ;

         }

         body.night button{

             background-color: #ccc;

             color:#fff;

         }

     </style>

     <script>

         window.onload = function () {

             var btn = document.getElementsByTagName('button');

             var flag = false;

             btn[0].onclick = function () {

                 if(!flag) {

                     document.body.className = "night";

                     btn[0].innerHTML = "开灯";

                 }else {

                     document.body.className = "";

                     btn[0].innerHTML = "关灯";

                 }

                 flag = !flag;

             }

 //            var flag = true;

 //            btn[0].onclick = function () {

 //                flag = !flag;

 //                if(!flag) {

 //                    document.body.className = "night";

 //                    btn[0].innerHTML = "开灯";

 //                }else {

 //                    document.body.className = "";

 //                    btn[0].innerHTML = "关灯";

 //                }

 //

 //            }

         }

     </script>

 </head>

 <body>

 <button>关灯</button>

 <h2>页面的文字</h2>

 <div class="video-box"></div>

 </body>

 </html>

JavaScript--开关思想的更多相关文章

  1. 淡扯javascript编程思想

    一.面向对象-OOD   虽然js面向对象的编程思想已经老话常谈了,但了为了文章的完整性,我还是把它加了进来,尽量以不太一样的方式讲述(虽然也没什么卵不一样的). 1.面向对象,首先得有类的概念,没有 ...

  2. JavaScript OOP 思想

    JS的核心是对象 {}, new function(){}这种形式也是对象. http://www.nowamagic.net/librarys/veda/detail/241 整理一些网上的资料,供 ...

  3. javascript面向对象思想2

    上篇说到面向对象可以帮我们梳理页面的逻辑的文章(http://www.cnblogs.com/hetaojs/p/6024013.html),很多朋友看了说我这种写法是初级的面向对象小儿科,确实是初级 ...

  4. JavaScript模块化思想requireJS的使用

    1. 使用require.js的意义   (1)实现JS文件的异步加载,避免网页因为加载JS文件缓慢造成网页未响应 (2)管理模块之间的依赖性,便于代码的编写和维护.页面中只需要引入require.j ...

  5. JavaScript模块化思想

    1. 首先,我们需要明白为什么要用模块化? 功能都是为了解决需求的.模块化可以带来的优点有以下几点: (1)可维护性.举个例子,如果我们把未使用模块化的代码比作油和水混合在了一起,模块化之后的代码就好 ...

  6. JavaScript模块化思想之入门篇

    在写正文之前先写一点废话,从我大三下学期正式接触前端到现在,已经六个月了.自己从HTML,CSS,简单的JS验证开始,一点点开始走入前端的世界.越发的感觉前端这一领域散发着无穷的魅力,也许这和我真心喜 ...

  7. javascript编程思想

    javascript编程开发修炼之道   提要文摘附注: 本文的核心内容是围绕javascript前端开发的编程技术要素,来深入地探讨编写高质量的javascript代码的方法.技巧.规范和最佳实践, ...

  8. javascript面向对象思想

    JavaScript 使用函数来定义类.语法:function className(){    // 具体操作} function Person() { this.name=" 张三 &qu ...

  9. JavaScript 面向对象思想 贪吃蛇游戏

    js代码: 游戏的对象 ,食物,蛇 ,游戏控制思路如下 (完整代码在https://github.com/774044859yf/ObjectSnakeGame下载) var snake = { aS ...

  10. JavaScript模块化思想之CommonJS、AMD、CMD、UMD

    前一篇文章了解了什么是模块,这一篇就简单介绍一下如何定义并加载一个模块. 我所了解的三种模块加载方式分别是CommonJS.AMD和CMD 网上关于这三种模块加载方式讲解的文章很多,我就简单的做个介绍 ...

随机推荐

  1. PAT甲级——A1047 Student List for Course

    Zhejiang University has 40,000 students and provides 2,500 courses. Now given the registered course ...

  2. PAT甲级——A1022 Digital Library

    A Digital Library contains millions of books, stored according to their titles, authors, key words o ...

  3. DevCloud会员权益升级！日常领码豆，轻松换好礼！

    为了回馈每一位用户的使用和支持, 华为云DevCloud上线了会员中心, 大家在会员中心可以通过完成任务赚取码豆, 并在兑换商城兑换精美礼品. 如何通过任务获得码豆? 我们为大家准备了各种日常任务, ...

  4. SSM7-nginx的反向代理和负载均衡

    1. 反向代理 1.1. 什么是反向代理 正向代理 反向代理: 反向代理服务器决定哪台服务器提供服务. 返回代理服务器不提供服务器.也是请求的转发. 1.2. Nginx实现反向代理 两个域名指向同一 ...

  5. git学习记录——远程仓库（说白了就是代码放到githup上）

    远程仓库 现在讲述的这些SVN都已经做到了,并没什么稀奇的地方 所以这节课赘述的是杀手级的东西——远程仓库githup ssh-keygen -t rsa  -C "xxxxxxxxxxx@ ...

  6. message d:\WEB_APP_QuChongFu\file\五月.xlsx (文件名、目录名或卷标语法不正确。)

    原因是 文件名或文件夹名中不能出现以下字符:\   /   :   *   ?  "  <  >   | 但是后台读取到的附件的文件路径就是这样的 网上大佬说了,这样处理 rep ...

  7. @Service ，@Controller，@Component注解

    首先,在applicationContext.xml文件中加一行: <context:component-scan base-package="com.hzhi.clas"/ ...

  8. 基于Kebernetes 构建.NET Core技术中台

    原文:基于Kebernetes 构建.NET Core技术中台 我们为什么需要中台 我们现在处于企业信息化的新时代.为什么这样说呢? 过去企业信息化的主流重心是企业内部信息化.但现在以及未来的企业信息 ...

  9. List的深度序列化Demo

    今天项目中出现了这个问题...就是使用一个List去进行其他的操作,生成一个新的List.但是却将原来的List的值也给改了...这应该是引用传递的问题,查了资料发现这是浅拷贝造成的.(ps:使用ad ...

  10. UVA1204 Fun Game

    Fun Game https://odzkskevi.qnssl.com/8d698323a1e07d605cdeea708ee8a01d?v=1508703139 [题解] 不难发现如果一个串的原串 ...