利用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里使用Dom操作Xml
Jan 22 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
详解Node.js串行化流程控制
May 04 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
原生JS实现烟花效果
Mar 10 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输出全球各个时区列表的方法
2015/03/31 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python unittest实现api自动化测试
2018/04/04 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python与mysql数据库交互的实现
2020/01/06 Python
杭州-DOTNET笔试题集
2013/09/25 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
学生自我评价范文
2014/02/02 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
追悼会主持词
2014/03/20 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
委托书的样本
2015/01/28 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
《小小的船》教学反思
2016/02/18 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server