利用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 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
php中switch语句用法详解
2015/08/17 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
js Array对象的扩展函数代码
2013/04/24 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
python文件写入实例分析
2015/04/08 Python
python监控键盘输入实例代码
2018/02/09 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
工程预算与管理应届生求职信
2013/10/06 职场文书
进修护士自我鉴定
2013/10/14 职场文书
运动会稿件300字
2014/02/14 职场文书
学术会议主持词
2014/03/17 职场文书
授权委托书
2015/01/28 职场文书
领导干部失职检讨书
2015/05/05 职场文书
回复函格式及范文
2015/07/14 职场文书
竞聘书的秘诀
2019/04/02 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
详解nodejs内置模块
2021/05/06 NodeJs
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
浅谈Python中对象是如何被调用的
2022/04/06 Python