用html+css制作时钟

基础概念

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）则用于描述HTML文档的外观和布局。结合HTML和CSS，可以创建出各种静态或动态的网页元素，包括时钟。

类型

静态时钟：使用HTML和CSS创建的时钟，样式固定，时间不会自动更新。
动态时钟：结合JavaScript，可以实现时钟的动态更新，显示当前时间。

应用场景

网页设计：作为网页的一个小部件，增加页面的趣味性和实用性。
教学示例：用于教学HTML和CSS的基础应用。
个人项目：作为个人网站或博客的一个特色元素。

示例代码（静态时钟）

<!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 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .clock {
            width: 200px;
            height: 200px;
            border: 20px solid #333;
            border-radius: 50%;
            position: relative;
        }
        .hour, .minute, .second {
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: bottom center;
        }
        .hour {
            width: 6px;
            height: 60px;
            background-color: #333;
            transform: translate(-50%, -100%) rotate(30deg);
        }
        .minute {
            width: 4px;
            height: 80px;
            background-color: #666;
            transform: translate(-50%, -100%) rotate(0deg);
        }
        .second {
            width: 2px;
            height: 90px;
            background-color: #f00;
            transform: translate(-50%, -100%) rotate(0deg);
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
</body>
</html>

示例代码（动态时钟）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic CSS Clock</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .clock {
            width: 200px;
            height: 200px;
            border: 20px solid #333;
            border-radius: 50%;
            position: relative;
        }
        .hand {
            position: absolute;
            left: 50%;
            bottom: 50%;
            transform-origin: top center;
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="hand hour" id="hour"></div>
        <div class="hand minute" id="minute"></div>
        <div class="hand second" id="second"></div>
    </div>
    <script>
        function updateClock() {
            const now = new Date();
            const hours = now.getHours() % 12 || 12;
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            const hourDeg = (hours * 30) + (minutes * 0.5);
            const minuteDeg = minutes * 6;
            const secondDeg = seconds * 6;

            document.getElementById('hour').style.transform = `translate(-50%, 0) rotate(${hourDeg}deg)`;
            document.getElementById('minute').style.transform = `translate(-50%, 0) rotate(${minuteDeg}deg)`;
            document.getElementById('second').style.transform = `translate(-50%, 0) rotate(${secondDeg}deg)`;

            setTimeout(updateClock, 1000);
        }

        updateClock();
    </script>
</body>
</html>