HTML灯光调节面板制作教程【完整版】

:root {
  --brightness: 1;
  --color-temp: 4000;
}
<p>.lamp {
background: hsl(var(--color-temp), 20%, calc(50% * var(--brightness)));
filter: brightness(var(--brightness));
}</p>

JavaScript 中只需更新变量值：

document.documentElement.style.setProperty('--brightness', brightnessValue / 100);
document.documentElement.style.setProperty('--color-temp', colorTempValue);

这样比反复拼接 style.backgroundColor 更可靠，也方便后续扩展（比如加过渡动画）。

色温转 HSL 的坑：浏览器不支持 color-temperature 函数

很多人以为 CSS 里能直接写 background: color-temperature(4000K) ——目前所有浏览器都不支持。必须手动把色温（开尔文值）转成 HSL 或 RGB。简单方案是查表插值，比如：

• 2700K → hsl(20, 100%, 50%)（暖黄）
• 4000K → hsl(45, 30%, 60%)（中性白）
• 6500K → hsl(60, 10%, 85%)（冷白）

别硬套黑体辐射公式（Planckian locus），日常面板够用即可。若需高精度，用现成库如 kelvin-to-rgb，但注意它返回的是 RGB 数组，得再转成 HSL 才能和 --brightness 融合。

移动端 touch 事件干扰 range 滑动？禁掉默认行为

在 iOS Safari 或部分安卓 WebView 中，手指快速滑动 <input type="range"> 可能触发页面滚动或缩放，导致滑块跳变。不是 bug，是浏览器对 touchstart 的默认响应。

解决方法很简单，在滑块父容器加：

<div class="panel" style="touch-action: none;">
  &lt;input type=&quot;range&quot; ...&gt;
</div>

或者用 JS 绑定：

document.querySelector('.panel').addEventListener('touchstart', e => e.preventDefault(), { passive: false });

注意：只对包含滑块的容器设 touch-action: none，别全局加，否则影响页面其他手势。

真实项目里最常被忽略的是色温映射的非线性——人眼对 3000K 到 4000K 的变化比 5000K 到 6000K 敏感得多，所以滑块的 step 和视觉反馈最好做对数映射，而不是均分刻度。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。