利用js实现简单开关灯代码
更新时间：2021年11月23日 09:22:29 作者：L-L
这篇文章主要分享的是如何利用js实现简单开关灯代码，下面文字围绕js实现简单开关灯的相关资料展开具体内容,需要的朋友可以参考以下，希望对大家又所帮助
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文档对象模型DOM，当网页被加载时，浏览器会创建页面的文档对象模型，通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。下面来看看文章得详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了微信小程序 数据绑定详解及实例的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了javascript 判断是否是微信浏览器的方法的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了JavaScript 键盘事件的处理及属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了微信小程序 生命周期详解的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了JavaScript的提携小技巧，如：过滤唯一值、短路求值、转换Boolean型等等，想详情了解的小伙伴请参考下面文章的具体内容2021-09-09
这篇文章主要介绍了在js中修改html body的样式，下面文章围绕js修改html 和body样式的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助2021-11-11
这篇文章主要介绍了微信小程序 摇一摇抽奖简单实例实现代码的相关资料,这里实现摇一摇抽奖的功能，需要的朋友可以参考下2017-01-01
这篇文章主要介绍了TypeScript枚举类型，所谓的枚举类型就是为一组数值赋予名字，下面我们来看看文章是怎么介绍的吧,需要的小伙伴也可以参考一下，希望对你有所帮助2021-12-12
这篇文章主要介绍了TypeScript 枚举类型，TypeScript 在 ES 原有类型基础上加入枚举类型，使得在 TypeScript 中也可以给一组数值赋予名字，这样对开发者比较友好，可以理解枚举就是一个字典，文章内容围绕TypeScript 枚举类型展开内容,需要的朋友可以参考一下2021-10-10
最新评论