当前位置：首页 > JavaScript

js实现关灯

2026-03-14 08:10:12JavaScript

使用CSS滤镜实现页面变暗效果

通过JavaScript动态添加CSS滤镜类实现"关灯"效果。创建一个全屏遮罩层，降低亮度并叠加深色背景：

function toggleDarkMode() {
  document.body.classList.toggle('dark-mode');
}

// 对应CSS
.dark-mode {
  filter: brightness(0.4);
  background-color: #111;
  transition: all 0.3s ease;
}

通过Canvas覆盖实现暗化效果

使用Canvas绘制半透明黑色层覆盖整个页面：

js实现关灯

const canvas = document.createElement('canvas');
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.zIndex = '9999';
canvas.style.pointerEvents = 'none';

function toggleLights() {
  if (canvas.style.display === 'none') {
    canvas.style.display = 'block';
    resizeCanvas();
    drawOverlay();
  } else {
    canvas.style.display = 'none';
  }
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

function drawOverlay() {
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

使用SVG滤镜实现高级暗化

创建SVG滤镜实现更复杂的颜色变换：

js实现关灯

const svgFilter = `
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <filter id="darken">
      <feColorMatrix type="matrix"
        values="0.3 0 0 0 0
                0 0.3 0 0 0
                0 0 0.3 0 0
                0 0 0 1 0"/>
    </filter>
  </svg>
`;

function applyDarkFilter() {
  const style = document.createElement('style');
  style.innerHTML = 'body { filter: url(#darken); }';
  document.head.appendChild(style);
  document.body.insertAdjacentHTML('afterbegin', svgFilter);
}

纯CSS变量切换方案

利用CSS变量实现主题切换：

document.documentElement.style.setProperty('--main-bg-color', '#222');
document.documentElement.style.setProperty('--text-color', '#eee');
document.documentElement.style.setProperty('--brightness', '0.6');

// 对应CSS
:root {
  --main-bg-color: #fff;
  --text-color: #333;
  --brightness: 1;
}

body {
  background-color: var(--main-bg-color);
  color: var(--text-color);
  filter: brightness(var(--brightness));
  transition: all 0.3s ease;
}

保存用户偏好到本地存储

结合localStorage保存用户选择的主题：

function toggleDarkTheme() {
  const isDark = document.body.classList.toggle('dark-theme');
  localStorage.setItem('darkTheme', isDark);
}

// 页面加载时检查
if (localStorage.getItem('darkTheme') === 'true') {
  document.body.classList.add('dark-theme');
}

以上方法可根据具体需求选择使用，CSS滤镜方案性能最佳，Canvas方案最灵活，SVG滤镜适合需要精细控制的情况，CSS变量方案便于维护和扩展。

标签: js