数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在JavaScript中使用颜色拾取器选择背景颜色？
在使用HTML和CSS创建网页时，我们需要从颜色拾取器中选择颜色。有时，我们也可能需要通过颜色拾取器输入选择背景颜色。
在本教程中，我们将学习不同的方法，允许用户从颜色拾取器输入中选择背景颜色，当用户选择新颜色时，它应该更改背景颜色。
使用颜色拾取器更改背景颜色
在HTML中，颜色拾取器输入允许用户从中选择颜色。我们可以使用输入的value属性获取选定的颜色值。
语法
用户可以按照以下语法根据颜色拾取器上选择的值更改背景颜色。
Document.body.style.backgroundColor = color.value;
我们在上面的语法中访问文档和body样式对象，并更改其“backgroundColor”属性。
示例
在下面的示例中，我们创建了输入并将其类型添加为颜色。因此，输入将充当颜色拾取器。用户可以从颜色拾取器中选择任何颜色，然后单击“更改颜色”按钮以调用selectColor()函数。
selectColor()函数根据从颜色拾取器中选择的最新值更改文档正文的背景颜色。
<html>
<head>
<style>
button {
font-size: 1.2rem;
border-radius: 10px;
margin: 20px;
border: 2px solid blue;
color: red;
}
</style>
</head>
<body>
<h2>Use the <i>color picker</i> to change a background color via color picker</h2>
<input id = "colorInput" type = "color">
<button onclick = "selectColor()"> Change the color </button>
<script>
function selectColor() {
let color = document.getElementById('colorInput');
// changing the background color
document.body.style.backgroundColor = color.value;
}
</script>
</body>
</html>
使用input事件
JavaScript包含许多事件。我们将使用input事件来检测颜色拾取器中的最新事件。我们将通过id在JavaScript中访问颜色输入并调用addEventListener()方法。
我们将“input”作为addEventListener()方法的第一个参数，并将回调函数作为第二个参数传递，以根据用户从颜色拾取器中选择颜色来更改正文的背景颜色。
语法
用户可以按照以下语法使用input事件通过颜色拾取器更改背景颜色。
colorInput.addEventListener('input', () => {
document.body.style.backgroundColor = color.value;
})
示例
在这个例子中，我们创建了颜色拾取器输入，其id为“colorInput”。我们在JavaScript中通过其id访问了输入元素。之后，我们使用了addEventListner()方法和style对象的backgroundColor属性，通过颜色输入来更改正文的背景颜色。
<html>
<body>
<h2>Using the <i>input event</i> to change a background color via color picker</h2>
<input id = "colorInput" type = "color">
<script>
let colorInput = document.getElementById('colorInput');
// Whenever the user changes the color, the input event will be called.
colorInput.addEventListener('input', () =>{
document.body.style.backgroundColor = colorInput.value;
});
</script>
</body>
</html>
使用setInterval()函数
setInterval()函数允许我们在特定间隔后调用特定函数。它将回调函数作为第一个参数，并将时间间隔（以毫秒为单位）作为第二个参数。
setInteral()函数会在一段时间后调用回调函数。在这里，我们将根据颜色拾取器中的颜色值更改背景颜色的值。
语法
用户可以按照以下语法使用setInterval()函数从颜色拾取器中选择背景颜色。
setInterval(() => {
document.body.style.backgroundColor = colorValue;
}, 100);
在上述语法中，colorValue是从颜色拾取器中获取的颜色值。
示例
在下面的示例中，作为setInterval()函数参数传递的箭头函数将每100毫秒调用一次。在箭头函数中，我们通过id访问颜色输入，使用value属性获取其颜色值，并将其赋值给style对象的“backgroundColor”属性。
用户可以在输出中看到，当他们在颜色拾取器中更改颜色时，它将立即反映为文档正文的背景颜色。
<html>
<head>
<style>
body {
color: white;
}
</style>
</head>
<body>
<h2>Using the <i>setInterval()</i> function to change a background color via color picker.</h2>
<input id = "color" type = "color" value = "fff">
<script>
// Change color after every 100 seconds
setInterval(() => {
let color = document.getElementById('color');
let colorValue = color.value;
document.body.style.backgroundColor = colorValue;
}, 100);
</script>
</body>
</html>
在本教程中，我们学习了三种方法来从颜色拾取器中选择颜色，并根据其值更改正文的背景颜色。用户可以使用第二种方法，它可以立即更改背景颜色，而无需按下按钮。
但是，使用setInterval()函数的第三种方法也会立即更改背景颜色，因为我们是从颜色拾取器中选择的。尽管如此，即使我们没有更改颜色拾取器中的值，它也会每100毫秒调用一次。因此，它可能会降低应用程序的性能。
4K+ 次浏览
