css js实现时钟

admin 2026年03月21日 18:19 103 0

通过CSS与JavaScript协作实现实时时钟：HTML构建表盘容器，CSS设置圆形表盘样式及指针定位（transform-origin为底部中心），JavaScript获取当前时间，计算时针（小时×30+分钟×0.5）、分针（分钟×6+秒×0.1）、秒针（秒×6）的旋转角度，通过transform: rotate()动态更新指针方向，结合setInterval每秒刷新，并添加transition实现平滑转动效果，最终呈现精确且美观的动态时钟。

用CSS和JavaScript从零开始打造一个动态时钟

时钟是前端开发中经典的入门案例，既能练习CSS的布局与动画技巧，又能掌握JavaScript的时间处理与DOM操作，本文将带你从零开始，用纯CSS和JavaScript打造一个美观且功能完整的动态时钟，包含模拟时钟、数字时钟以及主题切换功能。我们要做什么？

最终效果将包含三个核心部分：

模拟时钟：有时针、分针、秒针的圆形表盘，带刻度标识,指针随真实时间实时转动。
数字时钟：以数字形式显示当前时间（时:分:秒）,与模拟时钟同步更新。
主题切换：支持浅色/深色模式,一键切换时钟配色。

技术栈：HTML（结构）、CSS（样式与动画）、JavaScript（逻辑与交互）。

HTML结构：搭建时钟的"骨架"

我们需要用HTML搭建时钟的基本结构，模拟时钟需要一个表盘容器，包含刻度、指针和中心点；数字时钟需要一个显示时间的文本容器；主题切换需要一个按钮。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">CSS + JS 动态时钟</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>动态时钟</h1>
        <!-- 模拟时钟 -->
        <div class="analog-clock">
            <div class="clock-face">
                <!-- 小时刻度 -->
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <div class="mark hour-mark"></div>
                <!-- 指针 -->
                <div class="hand hour-hand"></div>
                <div class="hand minute-hand"></div>
                <div class="hand second-hand"></div>
                <!-- 中心点 -->
                <div class="center-dot"></div>
            </div>
        </div>
        <!-- 数字时钟 -->
        <div class="digital-clock">
            <div class="time-display">00:00:00</div>
        </div>
        <!-- 主题切换按钮 -->
        <button class="theme-toggle">切换主题</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式：让时钟"变美"

CSS的核心任务是美化时钟，包括表盘的圆形设计、指针的定位与动画、主题切换的样式切换,以下是关键样式解析：

基础布局与容器样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
}
/* 深色主题 */
body.dark-theme {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
.container {
    text-align: center;
}
h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
    transition: color 0.3s ease;
}
body.dark-theme h1 {
    color: #fff;
}

模拟时钟样式

.analog-clock {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
body.dark-theme .analog-clock {
    background: #2c3e50;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.clock-face {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
/* 刻度样式 */
.mark {
    position: absolute;
    width: 4px;
    height: 20px;
    background: #333;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    transform-origin: center 140px;
    transition: background 0.3s ease;
}
body.dark-theme .mark {
    background: #ecf0f1;
}
/* 小时刻度（更长更粗） */
.mark.hour-mark {
    height: 30px;
    width: 6px;
    background: #222;
    transform-origin: center 120px;
}
body.dark-theme .mark.hour-mark {
    background: #bdc3c7;
}
/* 指针样式 */
.hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: center 100%;
    border-radius: 10px;
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.hour-hand {
    width: 8px;
    height: 80px;
    background: #333;
    margin-left: -4px;
}
.minute-hand {
    width: 6px;
    height: 110px;
    background: #555;
    margin-left: -3px;
}
.second-hand {
    width: 2px;
    height: 120px;
    background: #e74c3c;
    margin-left: -1px;
}
body.dark-theme .hand {
    background: #ecf0f1;
}
body.dark-theme .hour-hand {
    background: #bdc3c7;
}
body.dark-theme .minute-hand {
    background: #95a5a6;
}
body.dark-theme .second-hand {
    background: #e74c3c;
}
/* 中心点 */
.center-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #333;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    transition: background 0.3s ease;
}
body.dark-theme .center-dot {
    background: #ecf0f1;
}

数字时钟样式

.digital-clock {
    margin-bottom: 30px;
}
.time-display {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    font-family: 'Courier New', monospace;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    transition: color 0.3s ease;
}
body.dark-theme .time-display {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

主题切换按钮样式

.theme-toggle {
    padding: 12px 24px;
    font-size: 1rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}
.theme-toggle:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219,

标签： #CSS时 #钟JS时钟