颜色选择器插件开发教程｜JavaScript实战指南

.saturation-area {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, white, rgba(255,255,255,0)), 
              linear-gradient(to top, black, rgba(0,0,0,0));
  background-color: hsl(0, 100%, 50%);
  position: relative;
  border-radius: 4px;
}
.selector {
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.brightness-slider input {
  width: 300px;
}
.preview {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  border-radius: 4px;
}

class ColorPicker {
  constructor(containerId, onChange) {
    this.container = document.getElementById(containerId);
    this.onChange = onChange;
    this.hue = 0;
    this.saturation = 100;
    this.value = 100;
this.init();
}
init() {
this.render();
this.bindEvents();
}
render() {
const saturationEl = this.container.querySelector('#saturation');
saturationEl.style.backgroundColor = hsl(${this.hue}, 100%, 50%);
const selector = this.container.querySelector('.selector');
selector.style.left = `${this.saturation}%`;
selector.style.top = `${100 - this.value}%`;

const preview = this.container.querySelector('#preview');
preview.style.backgroundColor = this.toHex();
}
bindEvents() {
const saturation = this.container.querySelector('#saturation');
const brightness = this.container.querySelector('#brightness');
// 拖拽或点击调色板
saturation.addEventListener('mousedown', (e) => {
  const rect = saturation.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  this.saturation = (x / rect.width) * 100;
  this.value = 100 - (y / rect.height) * 100;

  this.render();
  this.emitChange();
});

// 监听明度滑动
brightness.addEventListener('input', (e) => {
  this.value = e.target.value;
  this.render();
  this.emitChange();
});

// 色相变化可通过外部控制（例如加个色相环）
// 这里简化为固定色相，实际可扩展
}
toHex() {
// 简化转换：将 HSV 转为 RGB 再转 HEX
const rgb = this.hsvToRgb(this.hue, this.saturation / 100, this.value / 100);
return rgb(${rgb.r},${rgb.g},${rgb.b});
}
hsvToRgb(h, s, v) {
let r, g, b;
const i = Math.floor(h  6);
const f = h  6 - i;
const p = v  (1 - s);
const q = v  (1 - f  s);
const t = v  (1 - (1 - f) * s);
switch (i % 6) {
  case 0: r = v; g = t; b = p; break;
  case 1: r = q; g = v; b = p; break;
  case 2: r = p; g = v; b = t; break;
  case 3: r = p; g = q; b = v; break;
  case 4: r = t; g = p; b = v; break;
  case 5: r = v; g = p; b = q; break;
}

return {
  r: Math.round(r * 255),
  g: Math.round(g * 255),
  b: Math.round(b * 255)
};
}
emitChange() {
if (this.onChange) {
this.onChange({
hex: this.toHex(),
rgb: this.hsvToRgb(this.hue, this.saturation / 100, this.value / 100)
});
}
}
}

new ColorPicker('color-picker', (color) => {
  console.log('Selected color:', color.hex);
  // 可用于更新表单、样式或其他 UI 元素
});