首先，我们需要了解的是，在JavaScript中获取系统时间和格式化这个时间的基本方法：
javascript
// 获取系统的当前时间戳（毫秒级）
var now = new Date();
// 提取年、月、日、时、分、秒等部分
var year = now.getFullYear();
var month = now.getMonth() + 1; // 注意月份是从0开始计数的，需要+1才是实际意义的月份
var date = now.getDate();
var hours = now.getHours();
var mins = now.getMinutes();
var secs = now.getSeconds();
// 对于单个数字的月份或分钟进行补零处理以保持两位输出
month = (month < 10 ? "0" : "") + month;
date = (date < 10 ? "0" : "") + date;
hours = (hours < 10 ? "0" : "") + hours;
mins = (mins < 10 ? "0" : "") + mins;
secs = (secs < 10 ? "0" : "") + secs;
// 格式化为YYYY-MM-DD HH:mm:ss形式的时间字符串
var currentTimeStr = `${year}-${month}-${date} ${hours}:${mins}:${secs}`;
然后为了使它能够“动”起来——即每秒钟自动刷新一次，可以利用setInterval函数设置定时器执行上述操作:
javascript
function displayCurrentTime() {
var now = new Date(),
year, month, date, hours, minutes, seconds,
formattedDateTime;
// 上述提取与格式化的逻辑...
document.getElementById('timeDisplay').innerText = currentTimeStr;
// 每隔一秒重新计算并更新时间
}
window.onload = function () {
setInterval(displayCurrentTime, 1000);
};
在这段代码里，“displayCurrentTime”是我们定义的一个用于获取并格式化当前时刻的方法，并将其赋值给指定HTML元素的内容。“window.onload”的回调函数则是确保DOM加载完成后启动我们的定时任务，每隔一秒钟调用`displayCurrentTime()` 方法，从而实现了动态更新的效果。
综上所述，通过以上简单的几行JavaScript代码就能高效优雅地完成一个动态日期时间显示的需求。只需把JS代码添加至你的项目文件并在HTML文档中的合适位置放置一个id属性为"timeDisplay" 的标签即可看到效果。这样的实践不仅体现了JavaScript对于前端交互的强大支持力，也为我们深入理解其语言特性提供了生动示例。
标签： 日期显示的源代码
