用 setinterval 每60秒检查 new date().gethours()，结合 window.matchmedia('(prefers-color-scheme: dark)') 动态切换预设 css 类；图片预加载防闪白，临界点做跨时段检测确保及时更新。
如何用纯 JavaScript 控制 body 背景随时间段变化
不需要框架、不依赖 CSS 动画循环，直接读取本地时间，按预设时段切换 body 的 background-color 或 background-image。关键在于避免「一进页面就卡死」或「只执行一次不更新」。
常见错误是把时间判断写在脚本顶部——它只运行一次，不会响应时间推移。正确做法是用 setInterval 定期检查，但别设成 1 秒：太频繁；也别设成 10 分钟：可能错过临界点。折中选 60 秒足够。
- 用
new Date().getHours()获取当前小时（0–23），比解析字符串更可靠 - 时段边界建议用闭区间左闭右开，比如
6 表示上午，避免 12:00 出现歧义 - 如果用图片背景，确保路径正确且资源已加载，否则会白屏闪动；可先设默认色再异步换图
- 记得在
标签里加style="margin: 0; background-color: #fff;"防初始空白
setInterval 里反复修改 body.style.background 为什么有时不生效
因为 CSS 优先级或内联样式被其他规则覆盖。比如你写了 body { background: #000 !important; }，那 JS 设置的 body.style.background 就会被无视。
- 优先改
document.body.className，配合预设的 CSS 类，更可控：document.body.className = 'bg-morning' - 若必须用内联样式，用
document.body.style.cssText = 'background: linear-gradient(...); margin: 0;'一次性写全，避免被后续同名属性覆盖 - 检查浏览器控制台是否报错：
Cannot set property 'background' of null——说明脚本执行时body还没加载，把 script 放在前，或加DOMContentLoaded监听
支持夜间模式叠加的时段背景怎么写
用户开了系统深色模式，但你的「傍晚」背景却是浅色图，就会冲突。不能只看时间，还得查 window.matchMedia。
- 用
window.matchMedia('(prefers-color-scheme: dark)')判断当前系统偏好，返回{ matches: true/false } - 时段逻辑和颜色偏好要正交处理：比如「20:00–5:00」+「系统深色」→ 用暗蓝渐变；「20:00–5:00」+「系统浅色」→ 用暖灰星夜图
- 监听变化：
darkModeQuery.addEventListener('change', updateBackground)，不然切系统模式后背景不动 - 注意 Safari 旧版本不支持
addEventListener在matchMedia上，可用addListener兜底（仅需兼容到 iOS 13.9 以下才需要）
移动端 Safari 加载背景图慢导致闪白怎么办
特别是用 background-image: url(...) 指向大图时，iOS WebKit 会等图片加载完才渲染，期间显示默认白底。
- 提前预加载关键图：
<link rel="preload" href="night.jpg" as="image">放在里 - 给 body 设一个占位色（如深蓝
#0a1a2f），等图加载完成再切过去，避免白→色→图三段跳 - 用
Image对象手动加载并监听onload：const img = new Image(); img.onload = () => { document.body.style.backgroundImage = `url(${src})`; }; - 别用 base64 大图塞进 CSS——它阻塞渲染，且无法被浏览器缓存复用
setInterval 可能刚好错过，导致延迟 59 秒才更新。真要严丝合缝，得在定时器里加一层「是否跨时段」判断，而不是只比对当前小时。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
