Svelte中如何让日期时间显示无需刷新页面每秒自动更新

• 现有代码仅在页面首次加载时执行一次时间获取逻辑，没有定时重复拉取最新时间、更新页面的机制，所以只有手动刷新才会同步最新时间
• 原生HTML不支持{date}这类模板占位语法，写在标签里的变量占位不会自动替换为实际变量值，需要手动操作DOM更新展示内容
• 注意原生Date对象的getMonth()方法返回值范围是0_{11，对应现实中的1}12月，直接展示会比实际月份小1，需要手动+1修正

<script>
// 封装时间更新逻辑
function updateDateTime() {
    const d = new Date();
    // 补零工具：小于10的数字前补0，统一展示为两位数，不需要可删除
    const padZero = (num) => num < 10 ? `0${num}` : num;

    const date = padZero(d.getDate());
    const month = padZero(d.getMonth() + 1); // 月份修正+1
    const year = d.getFullYear();
    const hour = padZero(d.getHours());
    const minute = padZero(d.getMinutes());
    const second = padZero(d.getSeconds());

    // 更新页面展示内容
    document.getElementById('dateDisplay').textContent = `${year}/${month}/${date}`;
    document.getElementById('timeDisplay').textContent = `${hour}:${minute}:${second}`;
}

// 页面加载后立刻执行一次，避免首屏空白
updateDateTime();
// 启动定时器，每1000毫秒（1秒）执行一次时间更新
setInterval(updateDateTime, 1000);
</script>

<main>
    <div class="hero min-h-screen bg-base-200">
        <div class="hero-content text-center">
          <div class="max-w-md">
            <!-- 增加id属性，方便JS定位节点更新内容 -->
            <h1 id="dateDisplay" class="text-8xl font-bold"></h1>
            <br>
            <h1 id="timeDisplay" class="text-8xl font-bold"></h1>
          </div>
        </div>
      </div>
</main>

• 所有时间获取、数值修正、页面更新的逻辑统一封装在updateDateTime函数内，方便重复调用
• 初始化阶段先执行一次更新函数，打开页面就能立刻看到时间，不用等1秒定时器触发才显示内容
• setInterval是浏览器原生定时器方法，会按照设定的间隔循环执行传入的函数，1000毫秒的间隔刚好匹配秒级更新的需求
• 补零逻辑是可选优化，如果你不需要月、日、时、分、秒固定展示为两位数，可以删掉padZero相关处理，直接使用原始返回值即可

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