HTML显示系统当前时间：时间获取与展示实践
在网页开发中，展示系统当前时间是常见的需求，通常用于显示页面加载时间、实时时钟或时间戳标注等场景。我们可以通过JavaScript获取系统时间，再结合HTML元素完成时间的展示，整体实现逻辑清晰，仅需要几行核心代码即可完成。
核心实现思路
整个功能的实现分为三个步骤：
- 使用JavaScript的Date对象获取系统当前时间，解析出年、月、日、时、分、秒等具体字段
- 对获取到的时间字段做格式化处理，比如补零操作，避免单数字的时、分、秒显示为1位
- 将格式化后的时间字符串插入到HTML的指定容器中，完成页面展示
完整代码示例
下面的代码实现了基础的当前时间展示功能，包含时间获取、格式化和页面渲染的完整逻辑，代码中添加了中文注释说明每一步的作用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统当前时间展示</title>
<style>
.time-container {
width: 400px;
margin: 50px auto;
padding: 20px;
text-align: center;
border: 1px solid #e5e5e5;
border-radius: 8px;
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<div class="time-container" id="currentTime">加载时间中...</div>
<script>
// 定义时间格式化函数，补零处理单数字的时间字段
function formatTime(num) {
return num < 10 ? '0' + num : num;
}
// 获取并展示当前时间的函数
function showCurrentTime() {
// 创建Date对象，获取系统当前时间
const now = new Date();
// 解析时间字段
const year = now.getFullYear();
const month = now.getMonth() + 1; // getMonth返回0-11，需要加1得到实际月份
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 拼接格式化后的时间字符串
const timeStr = `${year}年${formatTime(month)}月${formatTime(day)}日 ${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}`;
// 将时间字符串插入到页面指定容器中
document.getElementById('currentTime').textContent = timeStr;
}
// 页面加载完成后先执行一次，展示初始时间
showCurrentTime();
// 每秒更新一次时间，实现实时时钟效果
setInterval(showCurrentTime, 1000);
</script>
</body>
</html>代码逻辑说明
上述代码中，我们首先定义了formatTime函数，用于处理时间字段的格式化，当传入的数字小于10时，自动在前面补0，保证时、分、秒始终显示为两位数字。然后通过new Date()创建Date对象，调用其内置的getFullYear、getMonth等方法获取对应的时间字段，注意getMonth返回的月份是0到11，需要加1才是实际的月份值。
拼接完成时间字符串后，通过document.getElementById找到页面中id为currentTime的容器，将时间字符串赋值给它的textContent属性完成展示。最后我们调用setInterval方法，每隔1000毫秒（即1秒）执行一次showCurrentTime函数，实现时间的实时更新效果。
扩展说明
如果需要调整时间的展示格式，比如只显示时分秒，或者显示为YYYY-MM-DD的格式，只需要修改时间字符串的拼接逻辑即可，不需要改动时间获取和格式化的核心逻辑。另外如果不需要实时更新效果，可以删除setInterval相关的代码，仅在页面加载时展示一次当前时间。