课堂笔记：静态网页中的实时系统时间显示

场景：前端基础练习 / 原生JS交互实战

核心目标：输出一个静态网页，通过 JavaScript 实现系统时间的实时显示（格式：年月日时分秒）

一、课堂任务与要求

本节课的任务是考察大家对原生 JavaScript 定时器与 DOM 操作的基础掌握情况：

• 文件结构：要求建立标准的 Web 项目目录，包含 class01 根目录，以及 css、img、js 子文件夹，主文件为 index.html。

• 核心功能：网页加载后，需要有一个区域能实时跳动显示当前的系统时间。

• 时间格式：必须包含完整的年、月、日、时、分、秒。

---

二、核心知识点与代码实现思路

1. HTML 结构：预留时间显示容器

老师说：“先把坑挖好，再用 JS 去填。” 在 index.html 中，只需要写一个容器（比如

或 ）来放时间。

当前系统时间

00:00:00

2. CSS 样式：让时间更好看

虽然是个小功能，但排版不能太丑。在 css/style.css 中设置一下字体大小、居中对齐和颜色。

.clock-container {
text-align: center;
margin-top: 100px;
font-family: 'Courier New', Courier, monospace; /* 等宽字体，时间对齐好看 */
}

timeDisplay {

font-size: 48px;
color: #333;
margin-top: 20px;
padding: 20px;
background: #f0f0f0;
border-radius: 8px;
display: inline-block;
}

3. JS 核心逻辑：定时器 + 日期格式化

这是本节课的重头戏，在 js/script.js 中：

• Date 对象：获取当前时间。

• toLocaleString 或手动拼接：格式化年月日时分秒。

• setInterval：让时间每秒更新一次。

// js/script.js

function updateTime() {
const now = new Date();

// 提取各个部分
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，+1并补零
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');

// 拼接成要求的格式
const timeString = ${year}-${month}-${day} ${hours}:${minutes}:${seconds};

// 更新到页面
document.getElementById('timeDisplay').textContent = timeString;
}

// 页面加载后立刻执行一次，然后每隔1000毫秒（1秒）执行一次
updateTime();
setInterval(updateTime, 1000);

---

三、课堂「踩坑」与老师点拨

1. 「时间不动？」→ 老师说：检查 setInterval 有没有写对

很多同学只写了 updateTime()，忘了套 setInterval，导致时间只显示初始值。或者写成了 setTimeout（只执行一次）。

2. 「月份不对/个位数不补零？」→ 老师说：JS的Date对象很坑，要手动处理

• getMonth() 返回的是 0-11，所以记得 +1。

• getDate(), getHours() 等返回的是数字，转成字符串后用 padStart(2, '0') 补零，否则会变成 2026-7-3 9:5:8 这种难看的格式。

3. 「文件路径报错？」→ 老师说：严格按他给的目录结构来

HTML里引CSS/JS时，./ 和 ../ 千万别搞混。

四、课后总结（博客元风格）

今天的课虽然短，但把 “原生 JS 怎么让页面动起来” 讲透了。

核心就是三步：取数据（Date） → 加工数据（格式化） → 塞回页面（DOM） → 循环执行（定时器）。

看似简单，但细节（补零、月份+1、定时器清除）全是考点。

另外，强调的目录规范也很重要，这在以后做项目实战时，是避免404错误的第一步！