Question

如何使用HTML5 colorpicker自动更改背景颜色？目前，在我选择了我的颜色后，我必须单击按钮来更改背景颜色。我尝试使用while（1）循环自动更改它，但它只是崩溃了我的浏览器。

https://jsfiddle.net/VortexP/eh4t17fv/4/

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

JAVASCRIPT:
function fcolor () {
var color = document.getElementById("colorpickerbutton").value;
document.getElementById("overlay").style.backgroundColor = color;
}

Answer 1

while(1)循环导致浏览器崩溃的原因是JavaScript是单线程的。这意味着所有JavaScript都按顺序运行。你可以永远不会在同一时间运行两个JavaScript函数。

因此，while(1)阻止所有其他JavaScript执行，甚至冻结网页本身，因为它会阻止所有浏览器事件。

您想要做的是仅在颜色输入发生变化时调用函数：）

看起来像这样：

HTML： <input type="color" id="colorpickerbutton" name="color" onChange="changeColor(this.value)">

JavaScript的：

function changeColor(newColor) {
     document.getElementById("overlay").style.backgroundColor = newColor;
}

Answer 2

你不需要任何无限的while循环。您需要攻击eventListener以进行输入。

<input type="color" id="colorPickerButton" name="color">

document.querySelector("input").addEventListener("input", function() {
    document.body.style.background = this.value;
});

HTML5 colorpicker的背景颜色

2 个答案: