静态显示时间（页面加载时的时间）
这种方法最简单，只在页面第一次加载时获取并显示一次时间，如果用户长时间停留在页面上,时间不会更新。
（图片来源网络，侵删）
完整代码 (HTML + CSS + JavaScript)
你可以直接将以下代码保存为一个 .html 文件（time.html）,然后用浏览器打开即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">静态时间显示</title>
<style>
/* CSS 样式，让时间看起来更美观 */
body {
background-color: #282c34;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Courier New', Courier, monospace;
}
#clock {
font-size: 5rem;
padding: 2rem 4rem;
border: 3px solid #61dafb;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>当前时间（静态）</h1>
<div id="clock"></div>
<script>
// 1. 获取显示时间的 <div> 元素
const clockElement = document.getElementById('clock');
// 2. 创建一个函数来格式化并显示时间
function showTime() {
// 3. 创建一个新的 Date 对象，它会自动包含当前的日期和时间
const now = new Date();
// 4. 从 Date 对象中获取各个部分
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 5. 格式化时间，确保数字是两位数（7 变成 "07"）
const formattedHours = String(hours).padStart(2, '0');
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(seconds).padStart(2, '0');
// 6. 组合成最终的时间字符串
const timeString = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
// 7. 将时间字符串设置到 <div> 元素的文本内容中
clockElement.textContent = timeString;
}
// 8. 页面加载完成后，立即调用一次 showTime 函数
showTime();
</script>
</body>
</html>
代码解释
-
HTML:
<body>中有一个<h1>标题和一个<div id="clock">，这个div是我们用来显示时间的容器，给它一个id是为了方便 JavaScript 找到它。
-
CSS:
这部分代码是用来美化页面的，它让背景变暗，文字居中，并给时间显示区域添加了边框和较大的字体,使其更醒目。
（图片来源网络，侵删） -
JavaScript:
document.getElementById('clock'): 这是 DOM 操作的核心，它通过id找到页面上的<div>元素，并将其存储在clockElement变量中。function showTime(): 我们把显示时间的逻辑封装在一个函数里，这样代码更清晰,也方便重复调用。const now = new Date(): 创建一个Date对象,这个对象包含了从用户电脑系统获取的当前完整日期和时间信息。now.getHours(),now.getMinutes(),now.getSeconds(): 这些方法分别从Date对象中提取出小时、分钟和秒。String(...).padStart(2, '0'): 这是一个非常实用的技巧。padStart(2, '0')确保返回的字符串总是至少有2位，如果数字小于10（比如7），它会在前面补一个0，变成 "07"。`...`: 这是 ES6 的模板字符串,可以方便地将多个变量拼接成一个字符串。clockElement.textContent = timeString: 将格式化好的时间字符串赋值给div的文本内容,这样时间就显示在网页上了。showTime(): 在页面加载完成后，调用这个函数,执行一次时间显示。
动态更新时间（实时显示）
这种方法更实用，时间会像电子钟一样每秒更新一次，它是在方法一的基础上,增加了一个定时器。
完整代码 (HTML + CSS + JavaScript)
只需将方法一的代码中的 <script> 部分替换成下面的代码即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">动态时间显示</title>
<style>
/* CSS 样式，和上面一样 */
body {
background-color: #282c34;
color: white;
display: flex;
flex-direction: column; /* 改为垂直排列 */
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Courier New', Courier, monospace;
}
h1 {
margin-bottom: 20px;
}
#clock {
font-size: 5rem;
padding: 2rem 4rem;
border: 3px solid #61dafb;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>当前时间（动态）</h1>
<div id="clock"></div>
<script>
// 1. 获取显示时间的 <div> 元素
const clockElement = document.getElementById('clock');
// 2. 创建一个函数来更新时间
function updateClock() {
const now = new Date();
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 = `${hours}:${minutes}:${seconds}`;
clockElement.textContent = timeString;
}
// 3. 立即执行一次，避免页面加载后等待1秒才显示时间
updateClock();
// 4. 设置一个定时器，每1000毫秒（即1秒）调用一次 updateClock 函数
setInterval(updateClock, 1000);
</script>
</body>
</html>
关键改动解释
- 函数名: 我们把
showTime改名为updateClock，因为它现在的职责是“更新”时间，而不仅仅是“显示”一次。 setInterval(updateClock, 1000): 这是实现动态效果的核心。setInterval是 JavaScript 的一个内置函数，它的作用是每隔一段固定的时间,就重复执行一个指定的函数。- 第一个参数
updateClock是要重复执行的函数。 - 第二个参数
1000是时间间隔，单位是毫秒。1000毫秒等于 1 秒。
- 立即调用
updateClock(): 如果不加这行代码，页面加载后会等待1秒，时间才会第一次出现，加上这行,可以确保时间在页面加载的瞬间就显示出来。
| 特性 | 方法一 (静态) | 方法二 (动态) |
|---|---|---|
| 实现方式 | 调用一次 showTime() 函数 |
调用 updateClock()，并用 setInterval 每秒重复调用 |
| 时间更新 | 仅在页面加载时更新 | 每秒自动更新 |
| 适用场景 | 显示创建时间、发布时间等不需要变化的时间 | 显示当前时间、倒计时等需要实时变化的信息 |
| 代码复杂度 | 简单 | 稍复杂，但逻辑清晰 |
对于“显示当前时间”这个需求，方法二（动态更新） 是最常用和最合适的。
