利用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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
vue如何从接口请求数据
Jun 22 Javascript
vue props对象validator自定义函数实例
Nov 13 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
PHP入门速成(2)
2006/10/09 PHP
PHP中session变量的销毁
2014/02/27 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
js实现抽奖功能
2020/11/24 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
python查找指定具有相同内容文件的方法
2015/06/28 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python中的decorator的作用详解
2018/07/26 Python
更新修改后的Python模块方法
2019/03/03 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
python代码能做成软件吗
2020/07/24 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
母亲节感言
2015/08/03 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python