利用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实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 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实现文件下载实例分享
2014/06/02 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
JavaScript闭包详解
2015/02/02 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
Python生成验证码实例
2014/08/21 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
python实现Adapter模式实例代码
2018/02/09 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
用Python开发app后端有优势吗
2020/06/29 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
小学门卫岗位职责
2013/12/17 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
教师求职信
2014/06/17 职场文书
公司授权委托书范本
2014/09/18 职场文书
严以律己学习心得体会
2016/01/13 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python