就是男默女泪的立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. 群晖的moments套件 发生未知错误

    一次了,哎 也不知道什么原因引起的 只能再搞一遍 先把homes文件夹数据弄走,免得弄丢 然后卸载momemts,删除数据库 还有其他人遇到这个情况http://www.gebi1.com/threa ...

  2. vue 二维码长按保存和复制内容

    效果图: 二维码用了 qrcode.vue npm install qrcode.vue --save 复制内容用了 vue-clipboard2 npm install vue-clipboard2 ...

  3. Luogu P2831 愤怒的小鸟(状压+记忆化搜索)

    P2831 愤怒的小鸟 题意 题目描述 Kiana最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于\((0,0)\)处,每次Kiana可以用它向第一象限发射 ...

  4. 开发者说 | 分布式事务中间件 Seata 的设计原理

    导读 微服务架构体系下,我们可以按照业务模块分层设计,单独部署,减轻了服务部署压力,也解耦了业务的耦合,避免了应用逐渐变成一个庞然怪物,从而可以轻松扩展,在某些服务出现故障时也不会影响其它服务的正常运 ...

  5. BootStrap框架选择

    1. mentronic4.0 效果非常好,但是商业版收费 下面是一个.net的系统,基于mentronic4.0开发,感觉不错 http://www.cnblogs.com/guozili/p/34 ...

  6. JEECMS二次开发 -------标签使用说明

    转载:https://blog.csdn.net/u012176984/article/details/45501771 一:标签套用结构说明 登录后台管理页面,这些嵌套在html中的标签 以[@标签 ...

  7. Linux 基础命令3 shell

    echo 显示一行文本 各种展开的实例 波浪线展开 算术表达式展开 支持的运算 奇怪的花括号展开 花括号的..用法 花括号(任选一个)的嵌套 参数展开$符很重要哦(一种展开做另一种的参数) 命令的替换 ...

  8. Struts_改写客户列表练习

    1.CustomerAction修改放入ActionContext 2.list.jsp使用struts标签库

  9. 【P1203】 【USACO1.1】坏掉的项链Broken Necklace

    P1203 [USACO1.1]坏掉的项链Broken Necklace 题目描述 你有一条由N个红色的,白色的,或蓝色的珠子组成的项链(3<=N<=350),珠子是随意安排的. 这里是 ...

  10. 大咖手把手教您，DLA一键建仓！

    DLA很早之前就支持了对关系型数据库的查询,但是一直以来用户会有一个担心: 直接分析RDS里面的数据会不会影响线上业务. 这个担心很合理,除非你要查询的RDS是专门用来做后台数据分析使用的,否则直接大 ...