利用js实现简单开关灯代码


Posted in Javascript onNovember 23, 2021

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>
 

到此这篇关于 利用js实现简单开关灯代码的文章就介绍到这了,更多相关 js实现简单开关灯内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
详解Vue的列表渲染
Nov 20 #Vue.js
详解JS数组方法
Nov 20 #Javascript
详解Vue slot插槽
Nov 20 #Vue.js
详解Vue router路由
Nov 20 #Vue.js
Ajax异步刷新功能及简单案例
Nov 20 #Javascript
关于JavaScript轮播图的实现
Nov 20 #Javascript
JavaScript的function函数详细介绍
You might like
php的正则处理函数总结分析
2008/06/20 PHP
php实现加减法验证码代码
2014/02/14 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php测试kafka项目示例
2020/02/06 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
js使用心得分享
2015/01/13 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python map比for循环快在哪
2020/09/21 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
2014年基层党组织公开承诺书
2014/03/29 职场文书
通信工程专业求职信
2014/06/04 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
个人党性分析材料
2014/12/19 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python