利用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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
JavaScript函数定义方法实例详解
Mar 05 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
vue打包时去掉所有的console.log
Apr 10 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
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
JS backgroundImage控制
2009/05/19 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python实现随机梯度下降法
2020/03/24 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
Python requests设置代理的方法步骤
2020/02/23 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
养成教育工作总结
2015/08/13 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python