前端
CSS
时钟
手表
手表时钟
使用 CSS 和 JavaScript 实现的复古手表风格时钟，支持自定义背景图片和响应式设计。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>手表</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Roboto:wght@400&display=swap">
<style>
.watch {
--watch-color: white;
--screen-color: black;
font-size: 4.5vmin;
font-family: 'Roboto', sans-serif;
color: #fff;
padding: 5em 2.5em;
border: 2px solid var(--watch-color);
border-radius: 2em;
box-shadow: inset 0 0 2px black,
inset 0 0 1rem 1em hsl(0 0% 100% / 0.25);
background-color: var(--screen-color);
background-image: url('你想要设置的背景图地址');
background-size: cover;
background-position: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 400px;
height: 400px;
box-sizing: border-box;
}
.time {
font-family: 'Dancing Script', cursive;
font-size: 2.5em;
margin: 0;
line-height: 1.2;
}
.date {
font-family: 'Dancing Script', cursive;
font-size: 0.8em;
margin: 0;
line-height: 1.2;
}
.watch::before,
.watch::after {
content: '';
position: absolute;
background-color: var(--watch-color);
z-index: -1;
}
.watch::after {
inset: -0.5em 20%;
border-radius: 0.5em;
background-image: linear-gradient(
#fff0,
hsl(0 0% 0% / 0.5) 0.5em calc(100% - 0.5em),
#fff0
);
}
.watch::before {
inset: -50vh 25%;
background-image: repeating-linear-gradient(
#fff0 0 0.3em,
hsl(0 0% 0% / 0.125) 0.3em 0.5em,
#fff0 0.5em 0.8em
),
radial-gradient(circle, #fff0, hsl(0 0% 0% / 0.25) 50%);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 1em;
min-height: 100vh;
background-color: #1d1e22;
display: grid;
place-items: center;
overflow: hidden;
}
/* 媒体查询：平板和移动设备 */
@media (max-width: 768px) {
.watch {
font-size: 6vw;
padding: 3em 1.5em;
width: auto;
height: auto;
}
.time {
font-size: 6vw;
}
.date {
font-size: 3.5vw;
}
}
/* 媒体查询：超小屏设备 */
@media (max-width: 480px) {
.watch {
font-size: 8vw;
padding: 2em 1em;
}
.time {
font-size: 8vw;
}
.date {
font-size: 3.5vw;
}
}
</style>
</head>
<body>
<div class="watch">
<div class="time"></div>
<div class="date"></div>
</div>
<script>
function clock() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
const dayOfWeek = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
const romanMonths = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
const month = romanMonths[date.getMonth()];
const dayNum = date.getDate();
const formattedDate = `星期${dayOfWeek}, ${month}月${dayNum}日`;
document.querySelector('.watch .time').innerHTML = formattedTime;
document.querySelector('.watch .date').innerHTML = formattedDate;
requestAnimationFrame(clock);
}
clock();
</script>
</body>
</html>
🖼️ 背景图片设置
background-image
设置表盘背景图 URL
background-size
cover 覆盖整个表盘
background-position
center 居中显示
