使用HTML、CSS和JavaScript创建的动态时钟-程序员茄子

代码使用HTML、CSS和JavaScript创建的动态时钟

2024-11-18 13:49:31 +0800 CST views 755

该文本展示了一个使用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>

复制全文生成海报前端开发网页设计动态效果

代码 使用HTML、CSS和JavaScript创建的动态时钟

推荐文章

代码使用HTML、CSS和JavaScript创建的动态时钟