JS小实战1-开关灯效果
作者：互联网
开灯的效果:
关灯的效果:
实现思路和功能:
1.默认页面是白色的(开灯状态),按钮显示的文字是关灯
2.点击按钮
1)获取当前开关灯状态(看body的背景颜色)
2)如果当前是开灯状态(body的背景颜色是白色),我们让body的背景颜色变为黑色(关灯状态),按钮中显示开灯
3)如果当前是关灯状态(body的背景颜色是黑色),我们让body的背景颜色变为白色(开灯状态),按钮中显示关灯
代码实现:
<head>
<style>
body{height: 100%; }
button{padding: 0 20px; line-height: 35px;}
</style>
</head>
<body style="background-color: #fff;">
<button id="lampBtn">关灯</button>
<script>
//1.想要操作谁就先获取谁,我们要获取body和按钮
let lampBtn = document.getElementById('lampBtn');
let body = document.body;//获取body
//2.事件绑定,点击按钮的时候做什么事情
lampBtn.onclick = function(){
注意:元素.style.xxx=xxx;设置元素的行内样式,元素.style.xxx不赋值的情况下是获取元素的行内样式(记住是行内样式:不管在那设置的样式,只要不是行内上设置,都获取不到)
//3.获取body的背景颜色
let bg = body.style.backgroundColor;
if(bg === 'white'){
//为什么用===,原因:body.style.backgroundColor;打印的结果是字符串
//当前处于开灯状态
body.style.backgroundColor = 'black';
lampBtn.innerText = '开灯';
}else{
//当前处于关灯状态
body.style.backgroundColor = 'white';
lampBtn.innerText = '关灯';
}
}
</script>
</body>
标签：实战,body,style,开灯,JS,开关,关灯,lampBtn,按钮 来源： https://blog.csdn.net/GWS1234567890/article/details/122267995