js实现关灯
实现关灯效果的JavaScript方法
使用CSS和JavaScript结合的方式可以模拟关灯效果，通常通过调整页面亮度或覆盖遮罩层实现。
HTML结构
<button id="toggleLight">关灯</button>
<div id="content">页面内容区域</div>CSS样式
#content {
transition: all 0.5s ease;
}
.dark-mode {
background-color: #222;
color: #eee;
/* 可选：添加遮罩层 */
position: relative;
}
.dark-mode::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 999;
}JavaScript代码
const toggleBtn = document.getElementById('toggleLight');
const content = document.getElementById('content');
toggleBtn.addEventListener('click', function() {
content.classList.toggle('dark-mode');
this.textContent = content.classList.contains('dark-mode') ? '开灯' : '关灯';
});更高级的实现方案
对于需要保存用户偏好的场景，可以结合localStorage：
// 检查本地存储
if (localStorage.getItem('darkMode') === 'true') {
content.classList.add('dark-mode');
toggleBtn.textContent = '开灯';
}
toggleBtn.addEventListener('click', function() {
content.classList.toggle('dark-mode');
const isDark = content.classList.contains('dark-mode');
localStorage.setItem('darkMode', isDark);
this.textContent = isDark ? '开灯' : '关灯';
});使用CSS变量实现主题切换
现代浏览器支持CSS变量，可以实现更灵活的主题切换：
CSS
:root {
--bg-color: #fff;
--text-color: #333;
}
.dark-mode {
--bg-color: #222;
--text-color: #eee;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: all 0.5s ease;
}JavaScript
document.documentElement.classList.toggle('dark-mode');性能优化建议
对于大型页面，使用CSS滤镜可能比覆盖遮罩层更高效：
.dark-mode {
filter: brightness(0.3);
}这种方法通过GPU加速，对性能影响较小，但会改变所有元素的显示效果。
