点击生成随机霓虹渐变网页，并显示颜色编码及复制功能
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>点击生成随机霓虹渐变网页</title>
<style>
body {
background: linear-gradient(to right, #ff00ff, #00ff00, #00ffff, #ff0000);
/* 默认渐变色 */
}
h1 {
text-align: center;
font-size: 3em;
margin: 0;
padding: 1em;
color: white;
text-shadow: 2px 2px 2px black;
/* 大标题样式 */
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* 垂直居中 */
}
.color-code {
font-size: 2em;
margin: 1em;
padding: 1em;
background-color: white;
border-radius: 5px;
text-align: center;
cursor: pointer;
/* 颜色编码样式 */
}
</style>
</head>
<body>
<h1>点击生成随机霓虹渐变</h1>
<div class='container'>
<div class='color-code'></div>
</div>
<script>
const gradient = ['#ff00ff', '#00ff00', '#00ffff', '#ff0000', '#ffff00', '#00ff7f', '#ff1493', '#9400d3', '#ffa500', '#8b0000'];
/* 预设渐变色 */
const colorCode = document.querySelector('.color-code');
/* 找到颜色编码元素 */
function generateRandomGradient() {
const randomIndex1 = Math.floor(Math.random() * gradient.length);
let randomIndex2 = Math.floor(Math.random() * gradient.length);
while (randomIndex1 === randomIndex2) {
randomIndex2 = Math.floor(Math.random() * gradient.length);
}
const color1 = gradient[randomIndex1];
const color2 = gradient[randomIndex2];
const randomGradient = `linear-gradient(to right, ${color1}, ${color2})`;
/* 生成随机渐变 */
document.body.style.background = randomGradient;
colorCode.textContent = `背景颜色编码: ${color1} - ${color2}`;
colorCode.setAttribute('data-clipboard-text', `${color1} - ${color2}`);
/* 显示颜色编码并设置复制内容 */
}
colorCode.addEventListener('click', () => {
const clipboard = new ClipboardJS('.color-code');
/* 复制功能 */
clipboard.on('success', function(e) {
console.log('复制成功: ' + e.text);
alert('颜色编码已复制到剪贴板');
e.clearSelection();
});
clipboard.on('error', function(e) {
console.log('复制失败: ' + e.action);
alert('复制失败，请手动复制');
});
});
generateRandomGradient();
/* 页面加载时生成随机渐变 */
document.addEventListener('click', generateRandomGradient);
/* 点击页面时生成随机渐变 */
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js'></script>
<!-- 引入Clipboard.js库 -->
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/m0qg 著作权归作者所有。请勿转载和采集!