利用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 相关文章推荐
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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
资料注册后发信小技巧
2006/10/09 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php调用shell的方法
2014/11/05 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php创建多级目录的方法
2015/03/24 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python 可爱的大小写
2008/09/06 Python
python django集成cas验证系统
2014/07/14 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
python爬虫的工作原理
2017/03/05 Python
Django实现快速分页的方法实例
2017/10/22 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
工作自我评价分享
2013/12/01 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
上课迟到检讨书
2014/02/19 职场文书
有关爱国演讲稿
2014/05/07 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
党组织结对共建协议书
2016/03/23 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫