让时间动起来：用 HTML、CSS 和 JavaScript 构建一个模拟时钟

2023-10-12 09:27:20

引言

在网页上展示实时的时间不仅美观而且实用。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 来构建一个模拟时钟，让时间仿佛真的“动”了起来。

准备工作

创建项目文件夹，并在其中建立 index.html、styles.css 和 script.js 三个文件。这分别是用来存放网页结构、样式和行为的文件。

HTML 结构

在 index.html 文件中，定义基本的HTML5文档结构，并嵌入CSS与JavaScript文件。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>模拟时钟</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="clock"></div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

在 styles.css 文件中，设计模拟时钟的外观。这里使用了圆形的表盘和指针来模仿真实时钟。

#clock {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #ffffff;
    position: relative;
    margin: 100px auto;
}

.hand {
    width: 50%;
    height: 6px;
    background-color: black;
    position: absolute;
    top: 50%;
    transform-origin: right center;
}

动态显示时间

使用JavaScript 更新时间

在 script.js 文件中，编写代码让时钟动态更新。通过获取当前时间和CSS变换属性来调整指针位置。

function updateTime() {
    const clock = document.getElementById('clock');
    
    // 创建或清除以前的指针
    if (clock.querySelector('.hand')) {
        clock.querySelector('.hour-hand').remove();
        clock.querySelector('.minute-hand').remove();
        clock.querySelector('.second-hand').remove();
    }

    let date = new Date();
    let seconds = date.getSeconds() / 60;
    let minutes = (date.getMinutes() + seconds) / 60;
    let hours = ((date.getHours() % 12) + minutes) / 12;

    // 创建指针并添加到时钟
    ['second', 'minute', 'hour'].forEach(hand => {
        const handElement = document.createElement('div');
        handElement.className = `${hand}-hand hand`;
        
        if (hand === 'second') {
            handElement.style.transform = `rotate(${360 * seconds}deg)`;
        } else if (hand === 'minute') {
            handElement.style.transform = `rotate(${360 * minutes}deg)`;
        } else { // hour
            handElement.style.transform = `rotate(${360 * hours}deg)`;
        }
        
        clock.appendChild(handElement);
    });

    requestAnimationFrame(updateTime);
}

updateTime();