JavaScript-магазин обратный отсчет для когда страница перезагружает etc

Таким образом, здесь я создал таймер обратного отсчета 10 минут, чтобы инициировать при нажатии кнопки «Пуск». Я хочу сохранить этот обратный отсчет так, чтобы, когда пользователь идет страницы и возвращается к нему обратный отсчет все еще будет идти. Обратите внимание, что я не хочу, чтобы обратный отсчет останавливался, а затем продолжался там, где он остановился при перезагрузке страницы, я хотел бы, чтобы он продолжался до указанного крайнего срока. Есть предложения?

<html>
<head>

</head>
<body>



    <a id="sendButton" class="button" onclick=" startClock();">START</a>

        <div id="sectionClock">

        <div id="clockdiv">
            <div>
                <span class="hours"></span>
                <div class="smalltext">Hours</div>
            </div>
            <div>
                <span class="minutes"></span>
                <div class="smalltext">Minutes</div>
            </div>
            <div>
                <span class="seconds"></span>
                <div class="smalltext">Seconds</div>
            </div>
        </div>
    </div>

    <script>
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);
    return {
        'total': t,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}
var flag = 0;

function startClock() {


    /************ INITIALIZE CLOCK ************/
    function initializeClock(id, endtime) {

        // If countdown time is 0 then operate
        if(flag==0)
        {
            var clock = document.getElementById(id);
            var hoursSpan = clock.querySelector('.hours');
            var minutesSpan = clock.querySelector('.minutes');
            var secondsSpan = clock.querySelector('.seconds');

        flag=1; 
        }


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


            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);
                flag=0;
            }
        }

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

    var timeInMinutes = 10;
    var currentTime = Date.parse(new Date());
    var deadline = new Date(currentTime + timeInMinutes*60*1000);
    initializeClock('clockdiv', deadline);

    document.cookie = deadline

    var cookie = document.cookie;

    console.log(cookie);

}

function sendTrack(){
    (function() {

        var trackUrl = document.getElementById("url");    

    }());
}

    </script>

</body>
</html>

1 ответ

  1. У вас есть правильная идея использования cookie, но вы должны убедиться, что Вы читаете/пишете его правильно. Я бы предложил вместо этого использовать локальное хранилище.

    var deadline = localStorage.deadline;
    if (deadline) { // Make sure we've saved one before
        deadline = new Date(deadline);
    } else { // Create a new one and save it
        deadline = new Date(Date.now() + timeInMinutes*60*1000);
        localStorage.deadline = deadline;
    }