使用JavaScript实现一个简单的颜色选择器_javascript UI组件

<div id="color-picker">
  <div class="color-option" data-color="#ff0000" style="background: #ff0000;"></div>
  <div class="color-option" data-color="#00ff00" style="background: #00ff00;"></div>
  <div class="color-option" data-color="#0000ff" style="background: #0000ff;"></div>
  <div class="color-option" data-color="#ffff00" style="background: #ffff00;"></div>
  <div class="color-option" data-color="#ff00ff" style="background: #ff00ff;"></div>
  <div class="color-option" data-color="#00ffff" style="background: #00ffff;"></div>
</div>
<div id="selected-color">选中的颜色：</div>

const colorPicker = document.getElementById('color-picker');
const selectedDisplay = document.getElementById('selected-color');

// 初始化选中第一个颜色
let currentColor = colorPicker.querySelector('.color-option').dataset.color;

// 设置初始显示
selectedDisplay.textContent = '选中的颜色：' + currentColor;

colorPicker.addEventListener('click', function(e) {
  if (e.target.classList.contains('color-option')) {
    const newColor = e.target.dataset.color;
    
    // 移除之前选中状态
    colorPicker.querySelector('.selected')?.classList.remove('selected');
    
    // 添加新选中状态
    e.target.classList.add('selected');
    
    // 更新当前颜色并显示
    currentColor = newColor;
    selectedDisplay.textContent = '选中的颜色：' + currentColor;
    
    // 可触发回调函数（用于外部集成）
    if (typeof onColorChange === 'function') {
      onColorChange(newColor);
    }
  }
});

#color-picker {
  display: flex;
  gap: 8px;
  padding: 10px;
  flex-wrap: wrap;
}

.color-option {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ccc;
}

.color-option.selected {
  border: 3px solid #000;
  transform: scale(1.1);
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}