该文本展示了一个使用HTML、CSS和JavaScript创建的动态时钟。时钟通过SVG元素绘制，包含外圈、内圈、刻度和指针。JavaScript用于计算时间并更新时钟的显示，样式通过CSS设置，确保时钟在不同屏幕尺寸下的适应性。时钟的设计包括平滑的过渡效果和现代的外观。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
transition: all 0.5s;
}
body {
background-color: #252525;
font-family: "Lato", sans-serif;
font-weight: 300;
}
.text {
position: absolute;
left: 10px;
bottom: 10px;
}
.text,
a {
color: #f4f4f4;
font-weight: 100;
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.textTime {
fill: #f4f4f4;
text-anchor: middle;
alignment-baseline: middle;
font-size: 1.5rem;
font-weight: 100;
}
.outerRing {
fill: none;
stroke: #f4f4f4;
stroke-width: 2px;
stroke-dasharray: 4px;
opacity: 0.5;
}
.primCircle {
fill: #252525;
stroke: #f4f4f4;
stroke-width: 10px;
}
.secCircle {
fill: #45d9fd;
stroke: #252525;
stroke-width: 3px;
}
.spike {
stroke: #f4f4f4;
stroke-width: 2px;
}
.triangle {
fill: #ee2560;
}
</style>
</head>
<body>
<div class="clock"></div>
</body>
<script>
const r1 = 5;
const r2 = 10;
const r3 = 15;
const width = window.innerWidth;
const height = window.innerHeight;
const minWH = Math.min(width, height);
const maxSize = minWH < 430 ? minWH - 30 : 400;
const rad = a => (Math.PI * (a - 90)) / 180;
const rx = (r, a, c) => c + r * Math.cos(rad(a));
const ry = (r, a, c) => c + r * Math.sin(rad(a));
// 辅助函数：创建SVG元素
const createSVGElement = type => document.createElementNS("http://www.w3.org/2000/svg", type);
// 创建时钟
function createClock() {
const size = maxSize;
const mid = size / 2;
const paddedRadius = (size - 30) / 2;
const svg = createSVGElement("svg");
svg.setAttribute("viewBox", `0 0 ${size} ${size}`);
svg.setAttribute("width", size);
svg.setAttribute("height", size);
const appendCircle = (cx, cy, r, className) => {
const circle = createSVGElement("circle");
circle.setAttribute("cx", cx);
circle.setAttribute("cy", cy);
circle.setAttribute("r", r);
circle.setAttribute("class", className);
svg.appendChild(circle);
};
// 外圈和内圈
appendCircle(mid, mid, mid - 5, "outerRing");
appendCircle(mid, mid, mid - 15, "primCircle");
// 创建刻度
const spikesGroup = createSVGElement("g");
for (let i = 1; i < 13; i++) {
const ang = i * 30;
const spike = createSVGElement("line");
spike.setAttribute("x1", rx(paddedRadius - 5, ang, mid));
spike.setAttribute("x2", rx(paddedRadius - 10, ang, mid));
spike.setAttribute("y1", ry(paddedRadius - 5, ang, mid));
spike.setAttribute("y2", ry(paddedRadius - 10, ang, mid));
spike.setAttribute("class", "spike");
spikesGroup.appendChild(spike);
}
svg.appendChild(spikesGroup);
// 三角形路径
const triangle = createSVGElement("path");
triangle.setAttribute("class", "triangle");
svg.appendChild(triangle);
// 二级圆圈
const secCircleGroup = createSVGElement("g");
[r1, r2, r3].forEach(r => {
const circle = createSVGElement("circle");
circle.setAttribute("class", "secCircle");
circle.setAttribute("r", r);
secCircleGroup.appendChild(circle);
});
svg.appendChild(secCircleGroup);
// 文本时间
const textTime = createSVGElement("text");
textTime.setAttribute("x", mid);
textTime.setAttribute("y", mid);
textTime.setAttribute("class", "textTime");
svg.appendChild(textTime);
document.querySelector(".clock").appendChild(svg);
// 更新时钟函数
function updateClock() {
const time = new Date();
const h = time.getHours() * 30; // 时针角度
const m = time.getMinutes() * 6; // 分针角度
const s = time.getSeconds() * 6; // 秒针角度
const hx = rx(paddedRadius - 30, h, mid);
const hy = ry(paddedRadius - 30, h, mid);
const mx = rx(paddedRadius - 30, m, mid);
const my = ry(paddedRadius - 30, m, mid);
const sx = rx(paddedRadius - 30, s, mid);
const sy = ry(paddedRadius - 30, s, mid);
// 更新三角形路径
triangle.setAttribute("d", `M${hx},${hy} L${mx},${my} L${sx},${sy} Z`);
// 更新二级圆圈
const circles = secCircleGroup.children;
[hx, mx, sx].forEach((cx, i) => {
circles[i].setAttribute("cx", [hx, mx, sx][i]);
circles[i].setAttribute("cy", [hy, my, sy][i]);
});
// 更新时间文本
const timeString = time.toTimeString().slice(0, 8).replace(/:/g, " : ");
textTime.textContent = timeString;
}
setInterval(updateClock, 1000);
updateClock();
}
// 当DOM加载完成后创建时钟
document.addEventListener("DOMContentLoaded", createClock);
</script>
</html>