<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--height: 210px;
--width: 225px;
--black: #2d2d2d;
}
*,
*::before,
*::after {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;
}
.color-card {
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
}
.color-card__top {
height: var(--height);
width: var(--width);
border-radius: 3px 3px 0 0;
background-color: #53ad6d;
}
.color-card__top:hover {
cursor: pointer;
}
.color-card__bottom {
display: flex;
align-items: center;
justify-content: space-around;
height: calc(var(--height)* .35);
width: var(--width);
background-color: white;
border-radius: 0 0 3px 3px;
}
p.instructions {
font-family: 'Roboto', sans-serif;
font-weight: 200;
font-size: 18px;
color: var(--black);
}
p#hexNum {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 28px;
color: var(--black);
letter-spacing: 1px;
}
.copy:hover {
cursor: pointer;
}
.copy:active {
transform: scale(.9);
}
.copy,
.copy::after {
height: calc(var(--height)* .08);
width: calc(var(--width)* .07);
border-radius: 2px;
border: 2px solid var(--black);
background-color: white;
}
.copy::after {
content: "";
position: absolute;
transform: translateX(3px) translateY(3px) translateZ(-1px);
}
/* Tooltip */
.tooltip {
content: "copy hex";
flex: 0 0 100%;
display: none;
position: absolute;
font-family: 'Roboto', sans-serif;
font-weight: 200;
font-size: 10px;
color: var(--black);
height: calc(var(--height)* .09);
width: calc(var(--width)* .25);
transform: translateX(91px) translateY(27px);
}
.copy:hover + .tooltip {
display: inline;
}
</style>
</head>
<body>
<h2>点击切换颜色</h2>
<div class="color-card" id="colorCard">
<div class="color-card__top" id="displayColor" onClick="changeColor()"></div>
<div class="color-card__bottom">
<p id="hexNum">#cd7780</p>
<div class="copy" onClick="copyCode()"></div>
<span class="tooltip">复制 hex 颜色</span>
</div>
</div>
<script>
// 存储当前随机颜色
let randomColor = "#";
// 生成随机十六进制颜色值
const makeRandomColor = () => {
// 使用更简洁的方式生成随机颜色
const randomHex = Math.floor(Math.random()*16777215).toString(16);
// 确保生成的颜色始终是6位
randomColor = `#${randomHex.padStart(6, '0')}`;
return randomColor;
};
// 更新颜色卡片显示
const makeColorCard = () => {
makeRandomColor();
document.getElementById("hexNum").innerHTML = randomColor;
document.getElementById("displayColor").style.backgroundColor = randomColor;
};
// 初始化颜色卡片
makeColorCard();
// 点击改变颜色
const changeColor = () => {
randomColor = "#";
makeColorCard();
};
// 监听空格键
document.addEventListener("keyup", (event) => {
if (event.code === "Space") {
changeColor();
}
});
// 复制颜色代码到剪贴板
const copyCode = () => {
navigator.clipboard.writeText(randomColor)
.then(() => {
// 复制成功后显示提示
const tooltip = document.querySelector('.tooltip');
tooltip.textContent = '已复制!';
setTimeout(() => {
tooltip.textContent = 'copy hex';
}, 1000);
})
.catch(err => {
console.error('复制失败:', err);
});
};
</script>
</body>
</html>
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ... </head>
<body>
</body>