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>