为什么从时钟开始练 Web

数字时钟是 Web 入门的最佳小项目：它小（一个 HTML 文件就够）、即时反馈（数字每秒跳动）、用到了 Web 三大件（HTML 结构、CSS 样式、JavaScript 动态）。

做完时钟，你就掌握了 Web 开发最核心的三件事：改 DOM、定时执行、用 Date 对象。这三件事学会了，留言板、待办清单、天气卡片都能写。

时钟是 Web 版的"Hello World"——但比 Hello World 有意思多了。
本文核心知识点
  • Date 对象拿当前时间。
  • setInterval每秒执行。
  • DOM 更新改页面文字。
  • padStart补零。
Web 数字时钟配图：蓝色渐变背景上一个圆润的圆形时钟，表盘空白只有彩色指针，旁边漂浮太阳、月亮、小星星、白云、小齿轮和一颗心形
时钟 = Date 对象 + setInterval + DOM 更新。

HTML 骨架：一个大号数字

先写 HTML 骨架，放一个 div 用来显示时间：

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

就这一行。JavaScript 会把里面的文字改成当前时间。

CSS 样式：让它好看

#clock {
  font-size: 80px;
  font-family: monospace;
  text-align: center;
  margin-top: 100px;
  color: #1E5FA8;
}

大字号、等宽字体、居中，看起来像一个真的时钟。

JavaScript：拿到当前时间

浏览器内置 Date 对象，new Date() 就拿到当前时间：

function updateClock() {
  const now = new Date();
  const h = String(now.getHours()).padStart(2, "0");
  const m = String(now.getMinutes()).padStart(2, "0");
  const s = String(now.getSeconds()).padStart(2, "0");
  document.getElementById("clock").textContent = h + ":" + m + ":" + s;
}

updateClock();

padStart(2, "0") 保证 9 点显示成 "09" 而不是 "9"。打开页面你会看到当前时间。

setInterval：让它每秒更新

现在时钟不会动。加一行 setInterval 让它每秒跑一次 updateClock：

setInterval(updateClock, 1000);

1000 毫秒 = 1 秒。打开页面，数字每秒跳动——一个实时走动的时钟就做完了。