JS 颜色选择器|极客笔记

JS 颜色选择器

在网页开发中，颜色选择器是一个常见的组件。它使用户能够方便地选择他们喜欢的颜色，并且可以在网页中应用这些颜色。在本文中，我们将使用 JavaScript 来创建一个简单的颜色选择器。

实现思路

我们计划创建一个包含颜色选择器按钮和颜色展示框的简单页面。当用户点击颜色选择器按钮时，我们将显示一个颜色选择器，用户可以从中选择颜色。选定的颜色将显示在颜色展示框中。

HTML 结构

首先，我们需要编写 HTML 代码来创建颜色选择器的界面。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Picker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="color-picker">
    <button id="color-picker-btn">Choose Color</button>
    <div id="color-display"></div>
</div>
<script src="script.js"></script>
</body>
</html>

在这个 HTML 结构中，我们有一个按钮元素用于触发颜色选择器，并且有一个 color-display 元素用于显示选定的颜色。

CSS 样式

接下来，我们编写 CSS 代码来设计颜色选择器的外观。

.color-picker {
    margin: 50px auto;
    text-align: center;
}
#color-picker-btn {
    padding: 10px 20px;
    font-size: 16px;
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}
#color-display {
    margin-top: 20px;
    width: 100px;
    height: 100px;
    border: 2px solid #ccc;
}

这些样式使颜色选择器按钮看起来像一个蓝色按钮，并且颜色展示框有一个灰色边框。

JavaScript 功能

最后，让我们编写 JavaScript 代码来实现颜色选择器的功能。

document.getElementById('color-picker-btn').addEventListener('click', function() {
    var color = prompt('Please enter a color (e.g. red, #ff0000):');

    if (color) {
        document.getElementById('color-display').style.backgroundColor = color;
    }
});

在这段代码中，我们使用 addEventListener 方法来监听按钮的点击事件。当用户点击按钮时，我们会弹出一个对话框要求用户输入颜色。用户输入的颜色值将被应用到颜色展示框的背景颜色上。