如何使用 HTML5 颜色选择器自动更改背景颜色? 目前,在我选择颜色后,我必须单击按钮来更改背景颜色。我尝试使用 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;
}
最佳答案
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;
}
关于javascript - 来自 HTML5 颜色选择器的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50144993/