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

<div id="color-picker">
  <div class="picker-panel">
    <div class="saturation-area" id="saturation">
      <div class="selector"></div>
    </div>
    <div class="brightness-slider">
      &lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;100&quot; id=&quot;brightness&quot;&gt;
    </div>
  </div>
  <div class="preview" id="preview"></div>
</div>

.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;
<pre class="brush:php;toolbar:false;">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 元素
});