时间戳

首页 > 解决方案 > 如何在浏览器刷新时保存计数计时器？

javascript - 如何在浏览器刷新时保存计数计时器？

问题描述

我是堆栈溢出和 javascript 的新手。我的第一个任务是创建一个倒数计时器。我的代码有效，但如果刷新浏览器，我会失去计时器位置。我一直在阅读有关使用本地存储来保存位置的文章，但我不确定如何将其添加到我当前的代码中。有人愿意为此提供帮助吗？这就是我当前的 javascript 在我的 html 文件中的样子。

     window.onload = () => {
        let day = 0;
        let hour = 0;
        let minute = 0;
        let seconds = 0;
        let totalSeconds = 0;

        let intervalId = null; 

        function startTimer() {
            ++totalSeconds;
            day = Math.floor(totalSeconds/86400);
            hour = Math.floor(totalSeconds /3600);
            minute = Math.floor((totalSeconds - hour*3600)/60);
            seconds = totalSeconds - (hour*3600 + minute*60);

            document.getElementById("day").innerHTML = day;
            document.getElementById("hour").innerHTML = hour;
            document.getElementById("minute").innerHTML = minute;
            document.getElementById("seconds").innerHTML = seconds;
        } 

        document.getElementById('start-btn').addEventListener('click', () => {
            intervalId = setInterval(startTimer, 1000);
        })

        document.getElementById('stop-btn').addEventListener('click', () => {
            if (intervalId)
                clearInterval(intervalId);
        });


        document.getElementById('reset-btn').addEventListener('click', () => {
            totalSeconds = 0;
            document.getElementById("day").innerHTML = '0';
            document.getElementById("hour").innerHTML = '0';
            document.getElementById("minute").innerHTML = '0';
            document.getElementById("seconds").innerHTML = '0';
        }); 
    }

标签： javascript

解决方案

首先，不要存储经过的秒数，而应该存储计时器开始的时间，然后计算经过的秒数。

在这里，如果"start-timestamp"本地存储中存在for 的值，则将其startTimestamp设置为它并激活计时器。

当计时器启动时，startTimestamp设置为当前时间并存储在本地存储中，当它停止时，"start-timestamp"从本地存储中删除。

let day = 0;
let hour = 0;
let minute = 0;
let seconds = 0;
let startTimestamp = 0;

let intervalId = null; 

function updateTimer() {
    let totalSeconds = (Date.now() - startTimestamp) / 1000;
    day = Math.floor(totalSeconds/86400);
    hour = Math.floor(totalSeconds /3600);
    minute = Math.floor((totalSeconds - hour*3600)/60);
    seconds = totalSeconds - (hour*3600 + minute*60);

    document.getElementById("day").innerHTML = day;
    document.getElementById("hour").innerHTML = hour;
    document.getElementById("minute").innerHTML = minute;
    document.getElementById("seconds").innerHTML = seconds;
}

{
    const _startTimestamp = localStorage.getItem("start-timestamp");
    if (_startTimestamp) {
        startTimestamp = Number(_startTimestamp);
        intervalId = setInterval(updateTimer, 1000);
    }
}

document.getElementById('start-btn').addEventListener('click', () => {
  if (!intervalId) {
      startTimestamp = Date.now();
      localStorage.setItem("start-timestamp", startTimestamp);
      intervalId = setInterval(updateTimer, 1000);
  }
})

document.getElementById('stop-btn').addEventListener('click', () => {
    if (intervalId) {
        clearInterval(intervalId);
        localStorage.removeItem("start-timestamp");
    }
});


document.getElementById('reset-btn').addEventListener('click', () => {
    totalSeconds = 0;
    document.getElementById("day").innerHTML = '0';
    document.getElementById("hour").innerHTML = '0';
    document.getElementById("minute").innerHTML = '0';
    document.getElementById("seconds").innerHTML = '0';
});

推荐阅读