JavaScript开关灯小案例

最新推荐文章于 2022-06-27 13:41:07 发布

原创最新推荐文章于 2022-06-27 13:41:07 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

js小项目专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的JavaScript开关灯效果实现。通过按钮点击切换背景颜色来模拟开灯和关灯的效果。涉及HTML元素选择、事件监听及DOM操作。

JavaScript开关灯小案例

1.效果
2.代码

1.效果

在这里插入图片描述

2.代码

<button id="btn">关灯</button>
			<script>
			var bodys = document.body;
			var btn =document.querySelector('#btn');
			var flag = 0;
			btn.onclick =function(){
				if(flag == 1){
				bodys.style.backgroundColor = 'black';
				btn.innerHTML = '开灯';
				flag = 0;
				}else{
					bodys.style.backgroundColor = 'white';
					btn.innerHTML = '关灯';
					flag = 1;
				}
			}
			</script>