zoukankan      html  css  js  c++  java
  • 用js实现简单开关灯

    body部分

    <button>开关灯</button>
    

    script部分

        <script>
            // window.onload 是窗口加载事件,可以实现将代码写到元素上面
            window.addEventListener('load', function () {
                var btn = document.querySelector('button');
                // 定义一个变量,用来判断灯的开关情况
                var flag = 0;
                btn.onclick = function () {
                    if (flag == 0) {
                        document.body.style.backgroundColor = 'black';
                        flag = 1;
                    } else {
                        document.body.style.backgroundColor = 'pink';
                        flag = 0;
                    }
                }
            })
        </script>
    
    • 如果script直接写到button下面的话,则采用以下代码
    <script>
            var btn = document.querySelector('button');
            var flag = 0;
            btn.onclick = function () {
                if (flag == 0) {
                    document.body.style.backgroundColor = 'black';
                    flag = 1;
                } else {
                    document.body.style.backgroundColor = 'pink';
                    flag = 0;
                }
            }
        </script>
    
  • 相关阅读:
    ES6相关概念及新增语法
    正则表达式
    递归
    高阶函数和闭包
    严格模式
    this指向
    递归
    严格模式
    函数内部的this指向
    函数的定义和调用
  • 原文地址:https://www.cnblogs.com/L-hua/p/14810426.html
Copyright © 2011-2022 走看看