利用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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
js有关元素内容操作小结
Dec 20 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
送你43道JS面试题(收藏)
Jun 17 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
WebStorm中如何将自己的代码上传到github示例详解
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页面运行时间的函数介绍
2013/07/01 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
Gird事件机制初级读本
2007/03/10 Javascript
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
两个DIV等高的JS的实现代码
2007/12/23 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
js确定对象类型方法
2012/03/30 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python常用特殊方法实例总结
2019/03/22 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
写给女朋友的检讨书
2014/01/28 职场文书
领导干部考察材料
2014/02/08 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
Python打包为exe详细教程
2021/05/18 Python
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python