利用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插件开发汇总
May 15 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
详解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
Email+URL的判断和自动转换函数
2006/10/09 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
深入php list()函数的详解
2013/06/05 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
下载给定网页上图片的方法
2014/02/18 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
django修改models重建数据库的操作
2020/03/31 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
为什么要有struct关键字
2012/05/08 面试题
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
优秀部门获奖感言
2014/02/14 职场文书
共青团员自我评价范文
2014/09/14 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
比较几种Redis集群方案
2021/06/21 Redis
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL