平滑背景色切换需将transition声明写在body基类上而非切换类中，初始背景色不可为transparent，推荐用HSL生成鲜亮随机色，设合理间隔并添加悬停暂停与卸载清理机制。
直接用 document.body.style.backgroundColor 配合 CSS transition 就能实现平滑背景色切换，但多数人卡在「为什么颜色跳变、不淡入淡出」——根本原因是过渡声明没写对位置，不是 JS 写得不对。
background-color 过渡必须写在基类上，不能只写在切换类里
如果你只在 .highlighted 类里写了 transition: background-color 0.5s，那移除这个类时，浏览器根本不会触发淡出动画。因为过渡属性被“随类一起删掉了”。
-
.body或body元素本身（或其容器）必须有默认的transition声明，比如transition: background-color 1.2s ease - 这个声明要始终存在，哪怕没加任何 class，否则「从有色→无色」就是硬切
- 初始背景色不能是
transparent（尤其 body），建议设为#ffffff或hsl(0, 0%, 98%)，让淡出终点明确
用 HSL 而不是 RGB 生成随机色，避免脏色和闪烁
纯 Math.random() 拼 rgb() 容易产出接近黑、灰、棕的难看值，iOS Safari 还可能因字符串解析慢引发轻微掉帧。
- 改用
hsl(${h}, 70%, 85%)：色相h在0–360随机，饱和度和明度固定，保证每次都是鲜亮柔和的色 - 间隔设在
3000–8000ms 之间；低于2000容易干扰阅读，高于10000就像静态页 - 移动端 Safari 下，提前缓存
document.body引用，别在setInterval回调里反复查 DOM
鼠标悬停暂停 + 页面卸载前清除定时器是必选项
否则用户正看内容时背景突然变色，或者 SPA 中频繁跳转导致定时器堆积，引发内存泄漏。
立即学习“前端免费学习笔记（深入）”；
- 监听
body的mouseenter和mouseleave，用布尔开关控制是否执行颜色更新 - 用
beforeunload或visibilitychange清除定时器：clearInterval(timerId) - 如果用了
addEventListener绑定事件，记得对应removeEventListener，尤其mouseleave不是自动解绑的
最容易被忽略的是 CSS 层叠优先级：如果你的外部样式表里写了 body { background: #fff !important; }，那 JS 设置的 backgroundColor 会被无视——这不是 bug，是规则生效了。要么删掉那行 CSS，要么改用 style.setProperty('background-color', color)（但别加 important，会破坏维护性）。
