倒计时不正常

时间:2017-09-04 09:33:40

标签: javascript timer countdown

以下脚本适用于倒数计时器,但在页面刷新时,它会从头开始。谁能建议我同样的解决方案? 我改变了一切但失败了,有人能建议我怎么做吗?

function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));

    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

function initializeClock(id, endtime) {
    var clock = document.getElementById(id);
    var daysSpan = clock.querySelector('.days');
    var hoursSpan = clock.querySelector('.hours');
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');

    function updateClock() {
        var t = getTimeRemaining(endtime);

        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
            clearInterval(timeinterval);
        }
    }

    updateClock();
    var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 30 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

1 个答案:

答案 0 :(得分:0)

您没有在用户的浏览器中存储任何数据,因此在页面刷新后清除所有内容。要摆脱这个问题,你可以做几件事:

  1. 使用本地存储 - &gt;你可以在这里存储一些字符串,这将是最好的,但不是更简单(?)的方式。

  2. 使用cookies - &gt;与上述相同

  3. 会话存储 - &gt;这可能无法在所有浏览器上按预期工作。

  4. 将数据保存在某种数据库中。这个将是最难实现的,但将允许您在将来更容易扩展计时器的功能。