html獲取16個隨機顏色并不重復

<!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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/96654.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/96654.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/96654.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！