请求实现颜色选择器中id为Colorbar的色相滑块功能

以下是可直接运行的色相滑块初始实现，包含完整的HTML、CSS和JavaScript代码：

HTML 结构 #

<div class="color-picker">
  <div id="Colorbar" class="hue-bar">
    <div class="hue-slider"></div>
  </div>
  <div class="hue-value">当前色相值: <span id="hueValue">0</span></div>
</div>

CSS 样式 #

.color-picker {
  padding: 20px;
  width: 300px;
}

#Colorbar {
  position: relative;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(to right, 
    #ff0000 0%, #ff9900 16.67%, 
    #ffff00 33.33%, #00ff00 50%, 
    #00ffff 66.67%, #0000ff 83.33%, 
    #ff00ff 100%);
  cursor: pointer;
  margin-bottom: 10px;
}

.hue-slider {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  left: 0;
}

.hue-slider:active {
  cursor: grabbing;
}

.hue-value {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

JavaScript 逻辑 #

const colorbar = document.getElementById('Colorbar');
const hueSlider = document.querySelector('.hue-slider');
const hueValue = document.getElementById('hueValue');

// 处理点击和拖拽事件，更新色相值与滑块位置
function updateHue(e) {
  const rect = colorbar.getBoundingClientRect();
  let x = e.clientX - rect.left;
  // 限制滑块在色条范围内
  x = Math.max(0, Math.min(x, rect.width));
  const hue = Math.round((x / rect.width) * 360);
  
  hueSlider.style.left = `${(x / rect.width) * 100}%`;
  hueValue.textContent = hue;
  
  // 可扩展：根据色相值生成对应RGB颜色
  // const rgbColor = hslToRgb(hue, 100, 50);
  // 例如用于更新预览色块：preview.style.backgroundColor = rgbColor;
}

// 点击色条任意位置跳转滑块
colorbar.addEventListener('click', updateHue);

// 拖拽滑块调整色相
let isDragging = false;
hueSlider.addEventListener('mousedown', () => {
  isDragging = true;
});

document.addEventListener('mousemove', (e) => {
  if (isDragging) updateHue(e);
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

// 可选工具函数：HSL转RGB，用于后续颜色转换扩展
function hslToRgb(h, s, l) {
  s /= 100;
  l /= 100;
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = l - c / 2;
  let r, g, b;
  if (h >= 0 && h < 60) {
    r = c; g = x; b = 0;
  } else if (h >= 60 && h < 120) {
    r = x; g = c; b = 0;
  } else if (h >= 120 && h < 180) {
    r = 0; g = c; b = x;
  } else if (h >= 180 && h < 240) {
    r = 0; g = x; b = c;
  } else if (h >= 240 && h < 300) {
    r = x; g = 0; b = c;
  } else {
    r = c; g = 0; b = x;
  }
  r = Math.round((r + m) * 255);
  g = Math.round((g + m) * 255);
  b = Math.round((b + m) * 255);
  return `rgb(${r}, ${g}, ${b})`;
}

功能说明 #

• 色条通过线性渐变覆盖完整色相光谱（0-360度）
• 支持点击色条任意位置快速定位滑块，也支持拖拽滑块精细调整色相
• 实时显示当前色相数值（0-360）
• 附带HSL转RGB工具函数，可直接扩展实现完整颜色选择器的其他功能

内容的提问来源于stack exchange，提问作者JSMaster