颜色选择器 - Javascript

颜色选择器是一个常见的UI组件，它允许用户从颜色板中选择一个颜色，或者通过输入RGB或十六进制值来指定一个颜色。在Web开发中，通过Javascript实现颜色选择器是一个很好的练习。

如何实现一个简单的颜色选择器？

要实现一个简单的颜色选择器，需要在HTML中添加一个颜色板，并在Javascript中处理用户的输入。以下是一个示例代码片段：

<div>
  <input type="text" id="color-picker">
  <div id="color-box"></div>
</div>

const colorPicker = document.getElementById('color-picker');
const colorBox = document.getElementById('color-box');

colorPicker.addEventListener('input', function() {
  const color = this.value;
  colorBox.style.backgroundColor = color;
});

这段代码创建了一个输入框color-picker和一个颜色框color-box。当用户在输入框中输入一个颜色值时，Javascript将该颜色值设置为颜色框的背景色。

如何扩展颜色选择器？

如果要实现一个更复杂的颜色选择器，可以添加更多的UI组件，如预设颜色按钮、颜色选择器、透明度滑块等。以下是一个示例代码片段：

<div>
  <div id="color-picker"></div>
  <div id="color-presets">
    <button data-color="#FF0000"></button>
    <button data-color="#00FF00"></button>
    <button data-color="#0000FF"></button>
  </div>
  <input type="range" min="0" max="100" step="1" id="alpha-slider">
  <div id="color-box"></div>
</div>

const colorPicker = document.getElementById('color-picker');
const colorPresets = document.getElementById('color-presets');
const alphaSlider = document.getElementById('alpha-slider');
const colorBox = document.getElementById('color-box');

function updateColor() {
  const color = colorPicker.style.backgroundColor;
  const alpha = alphaSlider.value / 100;
  colorBox.style.backgroundColor = `rgba(${color}, ${alpha})`;
}

colorPresets.addEventListener('click', function(e) {
  const target = e.target;
  if (target.tagName === 'BUTTON') {
    const color = target.dataset.color;
    colorPicker.style.backgroundColor = color;
    updateColor();
  }
});

colorPicker.addEventListener('input', function() {
  updateColor();
});

alphaSlider.addEventListener('input', function() {
  updateColor();
});

这段代码创建了一个复杂的颜色选择器，包括预设颜色按钮、透明度滑块等。当用户选择一个预设颜色或在颜色选择器中选择一个新颜色时，Javascript会根据用户的选择更新颜色框的背景色，并根据透明度滑块的值添加透明度效果。