JavaScript钟表

### 使用 JavaScript 实现动态时钟

为了创建一个能够实时更新的时钟，可以利用 HTML 来构建基本结构，并通过 CSS 设置样式使时钟美观。而核心逻辑则由 JavaScript 完成，它负责获取当前时间并定时刷新显示的时间。

#### 创建基础框架

首先定义好 HTML 文件中的容器用于放置时钟：

<div id="clock"></div>

接着设置一些简单的样式让其看起来更像一块实际存在的表盘：

#clock {
    font-size: 48px;
    color: #fff;
    background-color: #000;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

#### 编写 JavaScript 动态更新时间

最后编写一段脚本来不断读取系统时间并将之转换为易于阅读的形式展示出来：

function updateClock() {
    const now = new Date();
    
    let hours = String(now.getHours()).padStart(2, '0');
    let minutes = String(now.getMinutes()).padStart(2, '0');
    let seconds = String(now.getSeconds()).padStart(2, '0');

    document.getElementById('clock').textContent =
        `${hours}:${minutes}:${seconds}`;
}

// 初始化时立即调用一次函数来填充初始值
updateClock();

// 每隔一秒执行一次该方法以保持同步
setInterval(updateClock, 1000);

上述代码片段展示了如何使用 `Date` 对象获得当前时刻的信息[^1]，并通过字符串处理确保每个小时、分钟以及秒数都至少有两位数字长度。之后将这些信息组合起来赋给页面上的指定元素作为新的文本内容。此外还设置了间隔器使得整个过程得以循环往复地进行下去直到停止条件被触发（此处未设定具体终止情况，默认会一直运行）。