如何通过HTML5颜色选择器自动更改背景色？

嘿，我懂你的需求——你希望选完颜色后不用点按钮，背景色就能自动更新，结果用while(1)循环尝试实现的时候直接把浏览器搞崩了对吧？

这事儿不怪你，while(1)是个死循环，它会把浏览器的主线程完全占住，浏览器根本没机会去处理颜色选择的交互事件，也没法更新页面UI，可不就直接崩溃了嘛！咱们换个正确的思路，不用循环，靠事件监听就能搞定。

正确实现方案 #

我们可以给颜色选择器绑定input或者change事件，让它在用户选择颜色时自动触发背景色更新：

修改后的代码示例

首先是HTML部分（保留你原来的结构就行）：

<input type="button" id="fullscreenbutton" onclick="fcolor()"> Button <br>
<input type="color" id="colorpickerbutton" name="color"> Colorpicker <br>
<div id="overlay"></div>

然后是JavaScript部分，去掉死循环，换成事件监听：

// 获取页面元素
const colorPicker = document.getElementById('colorpickerbutton');
const overlay = document.getElementById('overlay');

// 监听颜色选择器的input事件——用户拖动滑块/选颜色时实时触发
colorPicker.addEventListener('input', function() {
  // 更新overlay的背景色为选中的颜色
  overlay.style.backgroundColor = this.value;
  // 如果要改整个页面背景，就换成：document.body.style.backgroundColor = this.value;
});

// 保留原来的按钮触发函数，作为手动更新的备选
function fcolor() {
  overlay.style.backgroundColor = colorPicker.value;
}

为什么这个方法可行？ #

• input事件会在用户操作颜色选择器的过程中持续触发，每次触发我们就同步更新背景色，浏览器有足够的时间处理事件和渲染UI，完全不会阻塞主线程。
• 如果你想要用户确认颜色选择后（比如点击颜色选择器的确定按钮）才更新，把input换成change事件就行，它只会在用户确认选择后触发一次。

这样一来，你选颜色的时候背景色就会自动跟着变，再也不用点按钮啦！

内容的提问来源于stack exchange，提问作者VortexP