Spring MVC应用中如何实现日期时间自动平滑更新？

嘿，完全懂你不想让页面闪烁的痛点——全页刷新的体验确实糟透了。咱们可以通过局部更新+前端轻量逻辑的方案，只更新显示时间的部分，让计时器平稳跑起来，完全不用重载整个页面。下面给你两种实用的实现思路：

方案一：定时请求后端接口更新（严格同步服务器时间） #

这种方式每次从后端获取精准的服务器时间，适合对时间准确性要求高的场景。

1. 后端Spring MVC接口实现 #

先写一个简单的接口，返回格式化后的当前服务器时间：

@Controller
@RequestMapping("/api/time")
public class TimeApiController {

    @GetMapping("/current")
    @ResponseBody
    public String getCurrentServerTime() {
        // 用Java 8+的DateTimeFormatter做格式化，按需调整格式
        DateTimeFormatter timeFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
        return LocalDateTime.now().format(timeFormatter);
    }
}

2. 前端页面逻辑 #

在页面中添加一个显示时间的容器，比如：

<p>当前服务器时间：<span id="serverTime"></span></p>

然后写JS逻辑，定时请求后端接口并更新容器内容——因为只更新单个元素，完全不会有页面闪烁：

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    // 先获取一次初始时间
    refreshServerTime();
    // 设置定时器，每隔1秒更新一次（可根据需求调整间隔，比如10秒）
    setInterval(refreshServerTime, 1000);
});

function refreshServerTime() {
    // 用fetch发起请求（也可以用XMLHttpRequest，看你习惯）
    fetch('/api/time/current')
        .then(res => res.text())
        .then(timeStr => {
            document.getElementById('serverTime').textContent = timeStr;
        })
        .catch(err => {
            console.error('更新时间出错啦:', err);
        });
}

方案二：前端自维护时间（减少后端请求） #

如果对时间同步的精度要求没那么高，可以只在页面加载时获取一次服务器时间，之后前端自己计算累加，这样能减少后端的请求压力。

前端实现代码 #

document.addEventListener('DOMContentLoaded', () => {
    // 先获取一次服务器初始时间
    fetch('/api/time/current')
        .then(res => res.text())
        .then(serverTimeStr => {
            // 把服务器时间转成Date对象
            const serverTime = new Date(serverTimeStr);
            // 计算服务器时间和本地当前时间的差值
            const timeOffset = serverTime.getTime() - Date.now();

            // 每秒更新一次显示
            setInterval(() => {
                // 基于差值计算当前服务器时间
                const currentServerTime = new Date(Date.now() + timeOffset);
                // 格式化时间（这里用原生的toLocaleString，也可以自定义格式）
                const formattedTime = currentServerTime.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                });
                document.getElementById('serverTime').textContent = formattedTime;
            }, 1000);
        })
        .catch(err => {
            console.error('获取初始时间失败:', err);
        });
});

为什么这两种方案不会闪烁？ #

因为它们都只操作页面上的单个DOM元素，替换其文本内容，而不是触发浏览器的全页刷新。整个过程是静默的，用户只会看到时间平稳跳动，完全不会有页面闪烁的问题。

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