如何实现非静态时间显示？moment.js静态时间问题求解

嗨，这个问题其实很容易解决——你当前的代码只在页面加载完成时执行了一次时间获取和渲染操作，所以只会显示页面加载那一刻的时间，自然不会动态变化啦。

要实现每秒更新的动态时间，核心思路是让时间获取和渲染的逻辑定时重复执行，具体步骤如下：

1. 封装时间更新逻辑为函数 #

把获取当前时间并更新DOM的代码抽成一个独立函数，方便后续重复调用：

function updateDynamicTime() {
  // 获取当前格式化后的时间
  const currentTime = moment().format('h:mm:ss a');
  // 更新页面元素内容（用textContent比innerHTML更安全，适合纯文本场景）
  document.getElementById("unq").textContent = currentTime;
}

2. 初始化显示时间 #

页面加载时先调用一次函数，确保一开始就显示正确的时间，避免初始空白：

updateDynamicTime();

3. 设置定时器定时更新 #

用setInterval方法设置每隔1000毫秒（1秒）调用一次更新函数，这样就能实现每秒刷新时间的效果：

setInterval(updateDynamicTime, 1000);

完整示例代码 #

把所有逻辑整合到HTML中，就能直接运行看到动态时间了：

<!-- 用于显示时间的DOM元素 -->
<div id="unq"></div>

<!-- 引入Moment.js库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script>
function updateDynamicTime() {
  const currentTime = moment().format('h:mm:ss a');
  document.getElementById("unq").textContent = currentTime;
}

// 初始化显示
updateDynamicTime();
// 每秒更新一次
setInterval(updateDynamicTime, 1000);
</script>

小提示 #

• 如果你不需要Moment.js的其他功能，其实原生JavaScript也能实现同样的动态时间，不过既然你已经在用Moment.js，继续用它的格式化语法会更顺手。
• 使用textContent替代innerHTML是更安全的选择，因为这里我们只是更新纯文本，不需要解析HTML内容。

内容的提问来源于stack exchange，提问作者LearnerCoderGamer