在前端开发中，获取并显示当前时间是一个常见的需求。无论是用于展示网页的实时时间，还是记录用户操作的时间戳，JavaScript 都提供了简单而强大的工具来实现这一功能。下面我们将详细介绍如何使用 JavaScript 获取当前时间，并将其格式化为易于阅读的形式。

代码实现：

function getTime() {
	var now = new Date();

	var year = now.getFullYear();       //年
	var month = now.getMonth() + 1;     //月
	var day = now.getDate();            //日

	var hh = now.getHours();            //时
	var mm = now.getMinutes();          //分
	var ss = now.getSeconds();          //分
	document.getElementById('time').innerText = year + '年' + month + '月' + day + '日 ' + hh + '点' + mm + '分' + ss + '秒';
}

代码解析

1. 创建 Date 对象：
   • 使用 new Date() 创建一个 Date 对象，它会自动获取当前的系统时间。
2. 获取年、月、日：
   • getFullYear()：获取完整的年份（例如 2023）。
   • getMonth()：获取月份，注意返回值是 0 到 11，所以需要加 1。
   • getDate()：获取当前日期（1 到 31）。
3. 获取时、分、秒：
   • getHours()：获取当前小时（0 到 23）。
   • getMinutes()：获取当前分钟（0 到 59）。
   • getSeconds()：获取当前秒数（0 到 59）。
4. 格式化时间：
   • 将获取到的年、月、日、时、分、秒拼接成一个字符串，例如 2023年10月5日 14点30分45秒。
5. 显示时间：
   • 使用 document.getElementById('time').innerText 将格式化后的时间显示在页面上。

使用示例

假设你的 HTML 中有一个元素用于显示时间：

<div id="time"></div>

调用 getTime() 函数后，页面会显示类似以下内容：

2023年10月5日 14点30分45秒

动态更新时间

如果你希望时间能够动态更新（例如每秒刷新一次），可以使用 setInterval 函数：

// 每秒调用一次 getTime 函数
setInterval(getTime, 1000);

这样，页面上的时间就会每秒更新一次，实现实时显示效果。

扩展功能

1. 补零操作：
   • 如果希望时间格式更加统一（例如 14:05:09 而不是 14:5:9），可以对小时、分钟、秒进行补零操作：

function padZero(num) {
    return num < 10 ? '0' + num : num;
}

var hh = padZero(now.getHours());
var mm = padZero(now.getMinutes());
var ss = padZero(now.getSeconds());

2. 自定义格式：
   • 如果需要显示其他格式（例如 2023-10-05 14:30:45），可以调整拼接方式：

document.getElementById('time').innerText = 
    year + '-' + padZero(month) + '-' + padZero(day) + ' ' + hh + ':' + mm + ':' + ss;

3. 国际化支持：
   • 如果需要支持不同语言的时间格式，可以使用 toLocaleString() 方法：

var options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
document.getElementById('time').innerText = now.toLocaleString('zh-CN', options);

适用场景

• 网页时钟：在网页上显示实时时间。
• 表单时间戳：记录用户提交表单的时间。
• 日志记录：在控制台或日志中记录操作时间。
• 倒计时功能：结合时间计算实现倒计时效果。

注意事项

• 时区问题：new Date() 获取的是用户本地时间。如果需要显示 UTC 时间，可以使用 getUTC 系列方法。
• 性能优化：如果页面中有大量时间显示需求，建议将时间格式化逻辑封装成工具函数，避免重复代码。