如何实现页面加载时自动启动计时器，刷新后持续计时且仅点击Submit按钮时停止（含localStorage实现思路咨询）

嘿，我来帮你搞定这两个计时器的问题，刚好你提到的localStorage思路完全正确，下面分步骤说明并给出修改后的完整代码：

1. 页面加载完成后自动启动计时器 #

这个很直接，只需要在页面DOM加载完成的回调末尾，主动调用startTimer()方法就行。不过结合第二个需求，我们要先从localStorage恢复之前的状态，再启动计时器，确保刷新后能衔接之前的计时。

2. 刷新页面后持续计时，仅点击Submit时停止 #

核心是用localStorage存储计时器的关键状态：

• 当计时器运行中：存储startTime（启动时的时间戳），用来计算从上次启动到现在的时长
• 当计时器暂停/编辑后：存储elapsed（累计的毫秒数），保留已消耗的时间
• 点击Submit时：清除所有存储的状态，确保下次加载不会继续计时

关键改动点 #

• 初始化阶段：从localStorage读取之前存储的startTime和elapsed，恢复计时器状态
• startTimer函数：启动时存储当前startTime，清除elapsed存储（因为运行时用时间戳计算更准确）
• pauseTimer函数：暂停时计算最新的累计时长，存入elapsed并清除startTime
• sendTime函数：点击Submit后，不仅暂停计时器，还要清空localStorage的所有计时数据
• 自动启动：页面加载完成后直接调用startTimer()

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer">00:00:00</div>
<form action="" method="post" name="xyz">
    <input type="button" name="start" value="Start" class="btn btn-primary mb-2">
    <input type="button" name="stop" value="Stop" class="btn btn-primary mb-2">
    <input type="submit" name="action" value="Submit" class="btn btn-primary mb-2">
    <input type="hidden" name="time" value="00:00:00">
</form>

<script>
$(function() {
    // 从localStorage恢复计时器状态
    var storedElapsed = localStorage.getItem('elapsed');
    var storedStartTime = localStorage.getItem('startTime');
    
    // 全局变量初始化
    var startTime = storedStartTime ? parseInt(storedStartTime, 10) : 0, 
        elapsed = storedElapsed ? parseInt(storedElapsed, 10) : 0, 
        timerId = 0, 
        $timer = $("#timer");

    function formatTime(time) {
        var hrs = Math.floor(time / 60 / 60 / 1000),
            min = Math.floor((time - hrs * 60 * 60 * 1000) / 60 / 1000),
            sec = Math.floor((time - hrs * 60 * 60 * 1000 - min * 60 * 1000) / 1000);
        hrs = hrs < 10 ? "0" + hrs : hrs;
        min = min < 10 ? "0" + min : min;
        sec = sec < 10 ? "0" + sec : sec;
        return hrs + ":" + min + ":" + sec;
    }

    function elapsedTimeFrom(time) {
        return formatTime(time - startTime + elapsed);
    }

    function showElapsed() {
        $timer.text(elapsedTimeFrom(Date.now()));
    }

    function startTimer() {
        // 仅在计时器停止时响应
        if (!timerId) {
            startTime = startTime || Date.now();
            timerId = setInterval(showElapsed, 1000);
            // 存储当前启动时间到localStorage
            localStorage.setItem('startTime', startTime);
            // 清除elapsed存储，运行时用时间戳计算累计时间
            localStorage.removeItem('elapsed');
        }
    }

    function pauseTimer() {
        // 仅在计时器运行时响应
        if (timerId) {
            clearInterval(timerId);
            elapsed += Date.now() - startTime;
            startTime = 0;
            timerId = 0;
            // 存储暂停后的累计时间
            localStorage.setItem('elapsed', elapsed);
            localStorage.removeItem('startTime');
        }
    }

    function resetTimer() {
        clearInterval(timerId);
        $timer.text("00:00:00");
        startTime = 0;
        elapsed = 0;
        timerId = 0;
        // 清除localStorage的计时器数据
        localStorage.removeItem('startTime');
        localStorage.removeItem('elapsed');
    }

    function editTimer() {
        pauseTimer();
        $timer.prop("contenteditable", true);
        $timer.css("border", "1px solid red");
    }

    function setElapsed() {
        var time = $timer.text(), arr = time.split(":");
        $timer.prop("contenteditable", false);
        $timer.css("border", "1px solid black");
        elapsed = parseInt(arr[0] * 60 * 60, 10);
        elapsed += parseInt(arr[1] * 60, 10);
        elapsed += parseInt(arr[2], 10);
        elapsed *= 1000;
        // 编辑后存储新的累计时间到localStorage
        localStorage.setItem('elapsed', elapsed);
    }

    function sendTime() {
        pauseTimer();
        // 提交前设置隐藏输入框的值
        $("[name='time']").val(formatTime(elapsed));
        // 点击Submit后清除所有存储的计时器数据
        localStorage.removeItem('startTime');
        localStorage.removeItem('elapsed');
    }

    // 页面加载完成后自动启动计时器
    startTimer();

    // 绑定事件
    $("[name='start']").click(startTimer);
    $("[name='stop']").click(pauseTimer);
    $("[name='reset']").click(resetTimer);
    $timer.dblclick(editTimer);
    $timer.blur(setElapsed);
    $("form").submit(sendTime);
});
</script>

额外说明 #

我还在setElapsed（编辑计时器完成后）增加了存储elapsed的逻辑，确保编辑后的状态也能在刷新后保留，让整个计时器的状态更连贯。

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