利用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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
Python端口扫描简单程序
2016/11/10 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
PyQt5组件读取参数的实例
2019/06/25 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
《胡杨》教学反思
2014/02/16 职场文书
药学职务聘任书
2014/03/29 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
人工作失职检讨书
2015/05/05 职场文书
交通事故起诉书
2015/05/19 职场文书
党员证明信
2015/06/19 职场文书
2015大学迎新标语
2015/07/16 职场文书
辞职信怎么写?
2019/05/21 职场文书