【代码】分享一个网页代码，根据时间自动切换开关灯效果
效果预览：
https://img.ximi.me/
原理：
根据当前时间判断白天黑夜，白天开灯，晚上关灯
调用方法：
可参考预览页面，【F12】获取
附上 CSS 与 JS 代码
CSS:
/* --- CSS 变量定义：默认是浅色模式 --- */:root { /* 浅色模式变量 */ --body-bg: #88d3e8; --body-color: #37474f; /* 主体文字颜色 */ --nv-title-bg: #f8f5ffd6; --nv-title-link-color: #5f5f5f; --nv-title-a-hover: #fefffe; --album-category-active-color: #1d1d1f; --lightbulb-bg: #e9e9e9; --footer-bg:#f8f5ffd6; --login-1-bg: #efefef; /* 新增：登录按钮背景色 */ --login-1-hover-color: #1d1d1f; /* 新增：登录按钮悬停文字颜色 */}/* 当 body 元素有 dark-mode-active 类时，覆盖上述变量为深色模式的值 */body.dark-mode-active { /* 深色模式变量 */ --body-bg: #3f4243; --body-color: #f9f9f9; /* 深色模式下主体文字颜色 */ --nv-title-bg: #191919; --nv-title-link-color: #ffffff; --nv-title-a-hover: #3ec270; --album-category-active-color: #ffffff; --lightbulb-bg: #736f6f; --footer-bg: #232425; --login-1-bg: #35363a; /* 深色模式：登录按钮背景色 */ --login-1-hover-color: #fff; /* 深色模式：登录按钮悬停文字颜色 */}body.dark-mode-active { background-color: #212121; color: #c9c9c9; background-blend-mode: overlay;}/* --- 应用 CSS 变量到你的样式中，并添加过渡效果 --- */body { font-family: sans-serif; margin: 0; min-height: 100vh; padding-bottom: 60px; box-sizing: border-box; /* 应用变量并添加过渡 */ /* background-color: var(--body-bg);*/ background-image: url(https://img.ximi.me/user/src/img.php?=1750729631_685a039f354f8.webp); background-size: cover; /* 让背景图片覆盖整个元素，可能会裁剪图片 */ background-position: center center; /* 可选：确保图片居中显示 */ background-repeat: no-repeat; /* 可选：防止图片重复 */background-attachment: fixed; color: var(--body-color); transition: background-color 0.3s ease, color 0.3s ease;}CSS
JS：
<script> document.addEventListener(\'DOMContentLoaded\', () => { const modeToggleBtn = document.querySelector(\'.lightbulb\'); // 确保选择器正确 const body = document.body; const localStorageKey = \'themeMode\'; // 根据时间判断是否为夜晚（18:00 - 次日 6:00 视为夜晚） const isNightTime = () => { const now = new Date(); const hour = now.getHours(); return hour >= 18 || hour < 6; }; // 应用主题的函数 // isDark: true 为深色，false 为浅色 // source: 标记主题来源 (用于调试，可选参数) const applyTheme = (isDark, source = \'manual\') => { if (isDark) { body.classList.add(\'dark-mode-active\'); } else { body.classList.remove(\'dark-mode-active\'); } // 更新 localStorage 存储的用户偏好 localStorage.setItem(localStorageKey, isDark ? \'dark\' : \'light\'); // 调试输出：显示当前模式和来源 const now = new Date(); const hours = String(now.getHours()).padStart(2, \'0\'); const minutes = String(now.getMinutes()).padStart(2, \'0\'); const modeText = isDark ? \'深色模式\' : \'浅色模式\'; console.log(`[主题] ${hours}:${minutes} - 已切换到 ${modeText} (来源: ${source})`); }; // --- 页面加载时检查并应用主题逻辑 --- const now = new Date(); const hours = String(now.getHours()).padStart(2, \'0\'); const minutes = String(now.getMinutes()).padStart(2, \'0\'); if (isNightTime()) { applyTheme(true, \'自动判断 (夜晚)\'); console.log(`[首次加载] ${hours}:${minutes} - 根据时间判断为夜晚 (${now.getHours()}h)，自动切换至深色模式。`); } else { applyTheme(false, \'自动判断 (白天)\'); console.log(`[首次加载] ${hours}:${minutes} - 根据时间判断为白天 (${now.getHours()}h)，自动切换至浅色模式。`); } const savedTheme = localStorage.getItem(localStorageKey); if (savedTheme) { // 检查 localStorage 中是否有保存的偏好，如果有，覆盖时间设置 applyTheme(savedTheme === \'dark\', \'LocalStorage 偏好覆盖\'); console.log(`[加载] ${hours}:${minutes} - 检测到 LocalStorage 偏好 \"${savedTheme}\"，覆盖时间设置。`); } // --- 为灯泡图标添加点击事件监听器 --- if (modeToggleBtn) { // 检查按钮是否存在，避免空指针错误 modeToggleBtn.addEventListener(\'click\', () => { // 获取当前实际应用的模式（而不是从 localStorage 读，因为 applyTheme 已经更新了 localStorage） const isCurrentlyDark = body.classList.contains(\'dark-mode-active\'); // 切换到相反的模式，并标记为手动切换 applyTheme(!isCurrentlyDark, \'手动切换\'); }); } else { console.error(\'错误：未找到主题切换按钮元素 (.lightbulb)。请检查 HTML 类名。\'); } // ... (确保这里包含所有其他您的 JS 代码，例如相册筛选和底部可见性逻辑) });</script>
