JavaScript 实现页面实时时钟显示是一项基础而实用的技能，尤其对于前端开发者来说。本文将详细解析如何使用 JavaScript 在网页上创建一个实时更新的时钟。
我们要解决的第一个问题是获取当前时间并进行格式化。JavaScript 提供了 `Date` 对象来处理日期和时间。当我们创建一个新的 `Date` 对象时，它会自动初始化为当前时间。我们可以通过 `getFullYear()`、`getMonth()`（注意月份是从 0 开始的，所以要加 1）、`getDate()`、`getHours()`、`getMinutes()` 和 `getSeconds()` 这些方法来获取年、月、日、小时、分钟和秒。为了格式化时间，我们需要确保每个部分都是两位数，不足两位时前面补零。例如：
```javascript
function getNow() {
var now = new Date();
var year = now.getFullYear();
var month = (now.getMonth() + 1).toString().padStart(2, '0');
var date = now.getDate().toString().padStart(2, '0');
var hour = now.getHours().toString().padStart(2, '0');
var minute = now.getMinutes().toString().padStart(2, '0');
var second = now.getSeconds().toString().padStart(2, '0');
var nowStr = year + "年" + month + "月" + date + "日 " + hour + ":" + minute + ":" + second;
return nowStr;
}
```
接下来，我们需要将格式化的时间显示在页面上。我们可以创建一个 `span` 元素，为其设置一个唯一的 `id`，如 `nowspan`。然后，利用 `document.getElementById` 方法获取这个元素，并使用 `innerHTML` 属性将时间字符串插入其中。HTML 结构如下：
```html
<body onload="getNow();">
<span id="nowspan"></span>
</body>
```
为了让时间不断更新，我们需要使用 `setTimeout` 函数来每隔一定时间（比如 1000 毫秒，即1秒）调用 `getNow` 函数。完整的 JavaScript 代码如下：
```javascript
<script type="text/javascript">
function getNow() {
// 获取并格式化当前时间
var now = new Date();
var year = now.getFullYear();
var month = (now.getMonth() + 1).toString().padStart(2, '0');
var date = now.getDate().toString().padStart(2, '0');
var hour = now.getHours().toString().padStart(2, '0');
var minute = now.getMinutes().toString().padStart(2, '0');
var second = now.getSeconds().toString().padStart(2, '0');
var nowStr = year + "年" + month + "月" + date + "日 " + hour + ":" + minute + ":" + second;
// 更新页面上的时间显示
var nowspan = document.getElementById("nowspan");
nowspan.innerHTML = nowStr;
// 定时更新
setTimeout(getNow, 1000);
}
</script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body onload="getNow();">
<span id="nowspan"></span>
</body>
</html>
```
这样，我们就成功地创建了一个实时更新的页面时钟。这个时钟会根据用户的计算机时间自动调整，每当页面加载或重新刷新时，时钟都会开始计时，并每秒钟更新一次时间。这个示例不仅适用于学习，也可以作为实际项目中的基础组件使用。
