利用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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
js继承的实现代码
Aug 05 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
javascript搜索框效果实现方法
May 14 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
javascript代码实现简易计算器
Jan 25 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
Laravel框架表单验证详解
2014/09/04 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python占位符输入方式实例
2019/05/27 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
孝老爱亲模范事迹材料
2014/05/25 职场文书
拉歌口号大全
2014/06/13 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
警示教育观后感
2015/06/17 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书