html获取16个随机颜色并不重复-Seo优化-合肥市网站建设公司

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="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 4pxrgba(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 16pxrgba(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 20pxrgba(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 8pxrgba(0,0,0,0.2);}button:hover{background:#3498db;transform:translateY(-3px);box-shadow:0 6px 12pxrgba(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 8pxrgba(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><divclass="container"><h1>16个不重复随机颜色生成器</h1><pclass="description">点击下方按钮生成16个独特的随机颜色，已排除您提供的颜色。点击颜色框可以复制色值到剪贴板。</p><divclass="controls"><buttonid="generate-btn">生成新颜色</button><buttonid="copy-all-btn">复制所有色值</button></div><divclass="colors-container"id="colors-container"><!-- 颜色框将通过JavaScript动态生成 --></div><divclass="excluded-colors"><h2>已排除的颜色</h2><divclass="excluded-list"><divclass="excluded-color"style="background-color:#FFEA3B;">#FFEA3B</div><divclass="excluded-color"style="background-color:#1569FF;">#1569FF</div><divclass="excluded-color"style="background-color:#6462CC;">#6462CC</div><divclass="excluded-color"style="background-color:#23B3FF;">#23B3FF</div><divclass="excluded-color"style="background-color:#14FFF1;">#14FFF1</div><divclass="excluded-color"style="background-color:#01B064;">#01B064</div></div></div></div><divclass="notification"id="notification">颜色已复制到剪贴板</div><script>document.addEventListener('DOMContentLoaded',function(){constcolorsContainer=document.getElementById('colors-container');constgenerateBtn=document.getElementById('generate-btn');constcopyAllBtn=document.getElementById('copy-all-btn');constnotification=document.getElementById('notification');// 需要排除的颜色列表constexcludedColors=['#FFEA3B','#1569FF','#6462CC','#23B3FF','#14FFF1','#01B064'];// 生成随机颜色functiongenerateRandomColor(){constletters='0123456789ABCDEF';letcolor='#';for(leti=0;i<6;i++){color+=letters[Math.floor(Math.random()*16)];}returncolor;}// 生成16个不重复且不在排除列表中的颜色functiongenerateUniqueColors(){constcolors=newSet();while(colors.size<16){constcolor=generateRandomColor();if(!excludedColors.includes(color.toUpperCase())&&!colors.has(color)){colors.add(color);}}returnArray.from(colors);}// 显示颜色functiondisplayColors(){colorsContainer.innerHTML='';constcolors=generateUniqueColors();colors.forEach(color=>{constcolorBox=document.createElement('div');colorBox.className='color-box';colorBox.style.backgroundColor=color;constcolorValue=document.createElement('div');colorValue.className='color-value';colorValue.textContent=color;colorBox.appendChild(colorValue);colorsContainer.appendChild(colorBox);// 添加点击复制功能colorBox.addEventListener('click',()=>{copyToClipboard(color);showNotification(`已复制:${color}`);});});}// 复制到剪贴板functioncopyToClipboard(text){consttextarea=document.createElement('textarea');textarea.value=text;document.body.appendChild(textarea);textarea.select();document.execCommand('copy');document.body.removeChild(textarea);}// 显示通知functionshowNotification(message){notification.textContent=message;notification.classList.add('show');setTimeout(()=>{notification.classList.remove('show');},2000);}// 复制所有颜色functioncopyAllColors(){constcolorBoxes=document.querySelectorAll('.color-value');constallColors=Array.from(colorBoxes).map(box=>box.textContent).join('\n');copyToClipboard(allColors);showNotification('所有颜色值已复制到剪贴板');}// 初始化displayColors();// 事件监听generateBtn.addEventListener('click',displayColors);copyAllBtn.addEventListener('click',copyAllColors);});</script></body></html>
html获取16个随机颜色并不重复

容器镜像签名密钥轮换：零停机时间完整实施指南

终极指南：Ivy中分布式参数服务器如何实现大规模AI训练的高效架构设计

Elixir-Boilerplate安全扫描全攻略：MixAudit与Sobelow保障应用安全

华为OD机试双机位C卷-字符串拼接(C/C++/Py/Java/Js/Go)

xcodebuild.nvim核心功能详解：从项目构建到测试全覆盖

SRE6/sre插件开发教程：构建自定义智能体技能组件
