当前位置：首页 > news >正文

html获取16个随机颜色并不重复

news 2025/9/12 7:40:48

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>16个不重复随机颜色</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);color: #fff;min-height: 100vh;padding: 20px;display: flex;flex-direction: column;align-items: center;}.container {max-width: 1200px;width: 100%;text-align: center;}h1 {margin: 20px 0;font-size: 2.8rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}.description {margin-bottom: 30px;font-size: 1.2rem;max-width: 800px;line-height: 1.6;}.colors-container {display: grid;grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));gap: 20px;width: 100%;margin-bottom: 40px;}.color-box {height: 150px;border-radius: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);transition: transform 0.3s ease, box-shadow 0.3s ease;overflow: hidden;cursor: pointer;}.color-box:hover {transform: translateY(-5px);box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);}.color-value {background-color: rgba(0, 0, 0, 0.5);padding: 8px 15px;border-radius: 20px;font-weight: bold;margin-top: 10px;backdrop-filter: blur(5px);}.controls {margin: 20px 0;display: flex;flex-wrap: wrap;gap: 15px;justify-content: center;align-items: center;}button {padding: 12px 25px;background: #2c3e50;color: white;border: none;border-radius: 30px;cursor: pointer;font-size: 1rem;font-weight: bold;transition: all 0.3s ease;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}button:hover {background: #3498db;transform: translateY(-3px);box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);}.excluded-colors {margin-top: 30px;background: rgba(0, 0, 0, 0.2);padding: 20px;border-radius: 15px;max-width: 800px;}.excluded-colors h2 {margin-bottom: 15px;}.excluded-list {display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;}.excluded-color {width: 50px;height: 50px;border-radius: 8px;display: flex;justify-content: center;align-items: center;font-size: 0.8rem;font-weight: bold;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}.notification {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);background: rgba(0, 0, 0, 0.8);color: white;padding: 15px 25px;border-radius: 30px;z-index: 1000;opacity: 0;transition: opacity 0.3s ease;}.show {opacity: 1;}@media (max-width: 768px) {.colors-container {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}h1 {font-size: 2rem;}}</style>
</head>
<body><div class="container"><h1>16个不重复随机颜色生成器</h1><p class="description">点击下方按钮生成16个独特的随机颜色，已排除您提供的颜色。点击颜色框可以复制色值到剪贴板。</p><div class="controls"><button id="generate-btn">生成新颜色</button><button id="copy-all-btn">复制所有色值</button></div><div class="colors-container" id="colors-container"><!-- 颜色框将通过JavaScript动态生成 --></div><div class="excluded-colors"><h2>已排除的颜色</h2><div class="excluded-list"><div class="excluded-color" style="background-color: #FFEA3B;">#FFEA3B</div><div class="excluded-color" style="background-color: #1569FF;">#1569FF</div><div class="excluded-color" style="background-color: #6462CC;">#6462CC</div><div class="excluded-color" style="background-color: #23B3FF;">#23B3FF</div><div class="excluded-color" style="background-color: #14FFF1;">#14FFF1</div><div class="excluded-color" style="background-color: #01B064;">#01B064</div></div></div></div><div class="notification" id="notification">颜色已复制到剪贴板</div><script>document.addEventListener('DOMContentLoaded', function() {const colorsContainer = document.getElementById('colors-container');const generateBtn = document.getElementById('generate-btn');const copyAllBtn = document.getElementById('copy-all-btn');const notification = document.getElementById('notification');// 需要排除的颜色列表const excludedColors = ['#FFEA3B', '#1569FF', '#6462CC', '#23B3FF', '#14FFF1', '#01B064'];// 生成随机颜色function generateRandomColor() {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}// 生成16个不重复且不在排除列表中的颜色function generateUniqueColors() {const colors = new Set();while (colors.size < 16) {const color = generateRandomColor();if (!excludedColors.includes(color.toUpperCase()) && !colors.has(color)) {colors.add(color);}}return Array.from(colors);}// 显示颜色function displayColors() {colorsContainer.innerHTML = '';const colors = generateUniqueColors();colors.forEach(color => {const colorBox = document.createElement('div');colorBox.className = 'color-box';colorBox.style.backgroundColor = color;const colorValue = document.createElement('div');colorValue.className = 'color-value';colorValue.textContent = color;colorBox.appendChild(colorValue);colorsContainer.appendChild(colorBox);// 添加点击复制功能colorBox.addEventListener('click', () => {copyToClipboard(color);showNotification(`已复制: ${color}`);});});}// 复制到剪贴板function copyToClipboard(text) {const textarea = document.createElement('textarea');textarea.value = text;document.body.appendChild(textarea);textarea.select();document.execCommand('copy');document.body.removeChild(textarea);}// 显示通知function showNotification(message) {notification.textContent = message;notification.classList.add('show');setTimeout(() => {notification.classList.remove('show');}, 2000);}// 复制所有颜色function copyAllColors() {const colorBoxes = document.querySelectorAll('.color-value');const allColors = Array.from(colorBoxes).map(box => box.textContent).join('\n');copyToClipboard(allColors);showNotification('所有颜色值已复制到剪贴板');}// 初始化displayColors();// 事件监听generateBtn.addEventListener('click', displayColors);copyAllBtn.addEventListener('click', copyAllColors);});</script>
</body>
</html>