html | 预览一个颜色数组

Aim: 查看几个颜色的效果，在网页中使用

1.效果1

xx
<script>
function displayHexColors(hexColors, barWidth = 100, barHeight = 100, textPosition = 'right') {
  // Create a container to hold the color bars
  const container = document.createElement('div');
  container.style.display = 'flex';
  container.style.flexDirection = 'column';
  container.style.gap = '0';

  // Create and append color bars to the container
  hexColors.forEach(hex => {
    const colorBar = document.createElement('div');
    const colorText = document.createElement('div');

    // Style the color bar
    colorBar.style.backgroundColor = hex;
    colorBar.style.width = `${barWidth}px`;
    colorBar.style.height = `${barHeight}px`;
    colorBar.style.margin = '0';
    colorBar.style.position = 'relative';
    colorBar.style.display = 'flex';
    colorBar.style.alignItems = 'center';
    colorBar.style.justifyContent = textPosition === 'left' ? 'flex-start' : 'flex-end';

    // Style the text container
    colorText.textContent = hex;
    colorText.style.color = 'white';
    colorText.style.fontSize = '12px';
    colorText.style.fontFamily = 'Arial, sans-serif';
    colorText.style.background = 'rgba(0,0,0,0.5)';
    colorText.style.padding = '2px 3px';
    colorText.style.borderRadius = '3px';
    colorText.style.margin = textPosition === 'left' ? '0 0 0 5px' : '0 5px 0 0';

    // Append text to the color bar
    colorBar.appendChild(colorText);

    // Append the color bar to the container
    container.appendChild(colorBar);
  });

  // Append the container to the body or a specific element
  document.body.appendChild(container);
}

// Example usage:
const hexColors = ["#E64B35","#4DBBD5","#00A087","#3C5488","#F39B7F","#8491B4","#91D1C2","#DC0000","#7E6148","#B09C85","#F2AF1C","#668C13"];
displayHexColors(hexColors, 300, 30, 'right'); // Display in column with width 300px and height 50px, text on the right

displayHexColors(hexColors, 300, 50, 'left');  // Display in column with width 300px and height 50px, text on the left
</script>

2. 效果2

xx
<script>
function displayHexColors(hexColors, config) {
  // Destructure config object
  const { barWidth = 100, barHeight = 100, textPosition = 'right' } = config;

  // Create a container to hold the color bars
  const container = document.createElement('div');
  container.style.display = 'block';
  container.style.flexDirection = 'column';
  container.style.flexWrap = 'wrap';
  container.style.gap = '0';

  // Create and append color bars to the container
  hexColors.forEach(hex => {
    const colorBarWrapper = document.createElement('div');
    const colorBar = document.createElement('div');
    const colorText = document.createElement('div');

    // Style the color bar wrapper
    colorBarWrapper.style.display = 'flex';
    colorBarWrapper.style.alignItems = 'center';
    colorBarWrapper.style.margin = '0';

    // Style the color bar
    colorBar.style.backgroundColor = hex;
    colorBar.style.width = `${barWidth}px`;
    colorBar.style.height = `${barHeight}px`;
    colorBar.style.margin = '0';

    // Style the text container
    colorText.textContent = hex;
    colorText.style.color = 'black';
    colorText.style.fontSize = '12px';
    colorText.style.fontFamily = 'Arial, sans-serif';
    colorText.style.background = 'rgba(255,255,255,0.8)';
    colorText.style.padding = '2px 1px';
    colorText.style.borderRadius = '3px';
    colorText.style.marginLeft = textPosition === 'left' ? '5px' : '0';
    colorText.style.marginRight = textPosition === 'right' ? '5px' : '0';

    // Position the text outside the color bar
    if (textPosition === 'left') {
      colorBarWrapper.appendChild(colorText);
      colorBarWrapper.appendChild(colorBar);
    } else if (textPosition === 'center') {
      colorText.style.position = 'absolute';
      colorText.style.left = '50%';
      colorText.style.transform = 'translateX(-50%)';
      colorText.style.top = `-${colorText.offsetHeight + 5}px`;
      colorBarWrapper.appendChild(colorText);
      colorBarWrapper.appendChild(colorBar);
    } else {
      colorBarWrapper.appendChild(colorBar);
      colorBarWrapper.appendChild(colorText);
    }

    // Append the color bar wrapper to the container
    container.appendChild(colorBarWrapper);
  });

  // Append the container to the body or a specific element
  document.body.appendChild(container);
}

// Example usage:
//hexColors=['#FF5733', '#33FF57', '#3357FF', '#F1C40F', '#8E44AD']
hexColors=["#E64B35","#4DBBD5","#00A087","#3C5488","#F39B7F","#8491B4","#91D1C2","#DC0000","#7E6148","#B09C85","#F2AF1C","#668C13"]

const config1 = {
  barWidth: 100,
  barHeight: 25,
  textPosition: 'right'
};

const config2 = {
  barWidth: 50,
  barHeight: 20,
  textPosition: 'left'
};

displayHexColors(hexColors, config1);   // Display each color in a separate row
displayHexColors(hexColors, config2);   // Display all colors in a single line
</script>