js实现开灯
使用HTML和JavaScript实现开关灯效果
通过JavaScript操作DOM元素改变背景颜色或图片，模拟开关灯效果。以下是两种常见实现方式：
方法一：切换背景颜色
<!DOCTYPE html>
<html>
<head>
<title>开关灯演示</title>
<style>
body {
transition: background-color 0.5s;
}
.light-on {
background-color: white;
color: black;
}
.light-off {
background-color: black;
color: white;
}
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body class="light-on">
<button id="toggleBtn">关灯</button>
<script>
const toggleBtn = document.getElementById('toggleBtn');
const body = document.body;
toggleBtn.addEventListener('click', function() {
body.classList.toggle('light-on');
body.classList.toggle('light-off');
toggleBtn.textContent = body.classList.contains('light-on') ? '关灯' : '开灯';
});
</script>
</body>
</html>方法二：切换图片或图标
<!DOCTYPE html>
<html>
<head>
<title>灯泡开关演示</title>
<style>
#bulb {
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
}
.on {
background-image: url('bulb-on.png');
}
.off {
background-image: url('bulb-off.png');
}
</style>
</head>
<body>
<div id="bulb" class="on"></div>
<button id="toggleBtn">关灯</button>
<script>
const toggleBtn = document.getElementById('toggleBtn');
const bulb = document.getElementById('bulb');
toggleBtn.addEventListener('click', function() {
bulb.classList.toggle('on');
bulb.classList.toggle('off');
toggleBtn.textContent = bulb.classList.contains('on') ? '关灯' : '开灯';
});
</script>
</body>
</html>进阶实现：添加动画效果
// 在方法一的基础上添加以下CSS
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.light-on {
animation: fadeIn 0.5s ease-in;
}注意事项
- 图片路径需要替换为实际可用的图片URL
- 颜色值可以根据需求调整
- 过渡效果时间可通过CSS的transition属性调整
- 移动端适配可能需要额外媒体查询设置
