利用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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
深入详解JS函数的柯里化
Jun 09 Javascript
详解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 第一节 php简介
2012/04/28 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
详解vue中axios的封装
2018/07/18 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python正则表达式指南 推荐
2018/10/09 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
python实现AES加密解密
2019/03/28 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python实现疫情地图可视化
2021/02/05 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
新学期校长寄语
2014/01/18 职场文书
高中班主任评语大全
2014/04/25 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python