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

!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title16个不重复随机颜色/titlestyle*{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/headbodydivclasscontainerh116个不重复随机颜色生成器/h1pclassdescription点击下方按钮生成16个独特的随机颜色已排除您提供的颜色。点击颜色框可以复制色值到剪贴板。/pdivclasscontrolsbuttonidgenerate-btn生成新颜色/buttonbuttonidcopy-all-btn复制所有色值/button/divdivclasscolors-containeridcolors-container!-- 颜色框将通过JavaScript动态生成 --/divdivclassexcluded-colorsh2已排除的颜色/h2divclassexcluded-listdivclassexcluded-colorstylebackground-color:#FFEA3B;#FFEA3B/divdivclassexcluded-colorstylebackground-color:#1569FF;#1569FF/divdivclassexcluded-colorstylebackground-color:#6462CC;#6462CC/divdivclassexcluded-colorstylebackground-color:#23B3FF;#23B3FF/divdivclassexcluded-colorstylebackground-color:#14FFF1;#14FFF1/divdivclassexcluded-colorstylebackground-color:#01B064;#01B064/div/div/div/divdivclassnotificationidnotification颜色已复制到剪贴板/divscriptdocument.addEventListener(DOMContentLoaded,function(){constcolorsContainerdocument.getElementById(colors-container);constgenerateBtndocument.getElementById(generate-btn);constcopyAllBtndocument.getElementById(copy-all-btn);constnotificationdocument.getElementById(notification);// 需要排除的颜色列表constexcludedColors[#FFEA3B,#1569FF,#6462CC,#23B3FF,#14FFF1,#01B064];// 生成随机颜色functiongenerateRandomColor(){constletters0123456789ABCDEF;letcolor#;for(leti0;i6;i){colorletters[Math.floor(Math.random()*16)];}returncolor;}// 生成16个不重复且不在排除列表中的颜色functiongenerateUniqueColors(){constcolorsnewSet();while(colors.size16){constcolorgenerateRandomColor();if(!excludedColors.includes(color.toUpperCase())!colors.has(color)){colors.add(color);}}returnArray.from(colors);}// 显示颜色functiondisplayColors(){colorsContainer.innerHTML;constcolorsgenerateUniqueColors();colors.forEach(color{constcolorBoxdocument.createElement(div);colorBox.classNamecolor-box;colorBox.style.backgroundColorcolor;constcolorValuedocument.createElement(div);colorValue.classNamecolor-value;colorValue.textContentcolor;colorBox.appendChild(colorValue);colorsContainer.appendChild(colorBox);// 添加点击复制功能colorBox.addEventListener(click,(){copyToClipboard(color);showNotification(已复制:${color});});});}// 复制到剪贴板functioncopyToClipboard(text){consttextareadocument.createElement(textarea);textarea.valuetext;document.body.appendChild(textarea);textarea.select();document.execCommand(copy);document.body.removeChild(textarea);}// 显示通知functionshowNotification(message){notification.textContentmessage;notification.classList.add(show);setTimeout((){notification.classList.remove(show);},2000);}// 复制所有颜色functioncopyAllColors(){constcolorBoxesdocument.querySelectorAll(.color-value);constallColorsArray.from(colorBoxes).map(boxbox.textContent).join(\n);copyToClipboard(allColors);showNotification(所有颜色值已复制到剪贴板);}// 初始化displayColors();// 事件监听generateBtn.addEventListener(click,displayColors);copyAllBtn.addEventListener(click,copyAllColors);});/script/body/html