使用css3绘制一个圆形动态的时钟 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Clock</title>
    <style>
        body {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        .clock {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #fff;
            border: 2px solid #333;
            position: relative;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        .hand {
            position: absolute;
            transform-origin: bottom center;
            background-color: #333;
            border-radius: 5px;
        }

        .hour {
            width: 4px;
            height: 60px;
            top: 40px;
            left: 98px;
        }

        .minute {
            width: 3px;
            height: 80px;
            top: 20px;
            left: 98.5px;
        }

        .second {
            width: 2px;
            height: 90px;
            top: 10px;
            left: 99px;
            background-color: red; /* Distinguish the second hand */
        }

        .center-circle {
            width: 10px;
            height: 10px;
            background-color: #333;
            border-radius: 50%;
            position: absolute;
            top: 95px;
            left: 95px;
            z-index: 1; /* Ensure it's above the hands */
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="hand hour"></div>
        <div class="hand minute"></div>
        <div class="hand second"></div>
        <div class="center-circle"></div>
    </div>

    <script>
        function updateClock() {
            const now = new Date();
            const seconds = now.getSeconds();
            const minutes = now.getMinutes();
            const hours = now.getHours() % 12; // 12-hour format

            const secondsDegrees = (seconds / 60) * 360;
            const minutesDegrees = ((minutes + seconds / 60) / 60) * 360;
            const hoursDegrees = ((hours + minutes / 60) / 12) * 360;

            const hourHand = document.querySelector('.hour');
            const minuteHand = document.querySelector('.minute');
            const secondHand = document.querySelector('.second');

            secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
            minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
            hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
        }

        setInterval(updateClock, 1000); // Update every second
        updateClock(); // Initial update
    </script>
</body>
</html>

Key improvements and explanations:

  • Centering: The clock is centered on the page using flexbox.
  • Clearer Hands: The second hand is now red for better visibility. The hands also have rounded ends.
  • Center Circle: A small circle is added in the center for a more realistic clock look. z-index ensures it's on top of the hands.
  • 12-Hour Format: The clock now displays time in a standard 12-hour format.
  • Smooth Second Hand Movement: Instead of jumping every second, the second hand now moves smoothly using transition (removed in this updated version for accuracy with setInterval). The setInterval function updates the clock every second, providing the animation.
  • Initial Update: The updateClock() function is called once outside the setInterval to set
posted @ 2024-12-01 09:50  王铁柱6  阅读(76)  评论(0)    收藏  举报