_KS Ответов: 1

У меня есть таймер javascript каждый раз когда я обновляю страницу таймер сбрасывается

Когда я обновляю страницу, таймер сбрасывается, я хочу, чтобы он продолжал отсчет, даже если я обновляю или перезапускаю браузер. Но он будет продолжать считать, когда я снова нажму кнопку "Пуск". Пожалуйста помочь.

Вот мой код.

HTML-код
<pre><!DOCTYPE html>
<html lang="en">
    <head>
        <title>Timer</title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script></script>
    </head>
<body>
        <span id="countup">00:00:00</span>
        <button type="button" id="attendance_button">Start</button>
</body>
</html>

Код JS
<pre lang="Javascript"><pre><script type="text/javascript">
    (function(){
$("#attendance_button").click( function(){

    getlocalStoragetime();
});
})()

function getlocalStoragetime()
{
    var time = localStorage.getItem('timer') || "00:00:00",
        parts = time.split(':'),
        hours = +parts[0],
        minutes = +parts[1],
        seconds = +parts[2],
        span = $('#countup');

    function correctNum(num) {
        return (num<10)? ("0"+num):num;
    }

    var timer = setInterval(function(){
        seconds++;
        if(seconds > 59) {
            minutes++;
            seconds = 0;

            if(minutes > 59) {
                hours++;
                seconds = 0;
                minutes = 0;

                if(hours >= 24) {
                  alert("You're logged-in for 24 hours.");
                }
            }
        }
        var displayTime = correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds);
        localStorage.setItem('timer', displayTime);
        span.text(displayTime);
    }, 1000); 
}
</script>


Что я уже пробовал:

я попытался поместить его в функцию(код таймера) и просто вызвать эту функцию, но она не будет работать.

1 Ответов

Рейтинг:
2

OriginalGriff

Вам нужно узнать, как все работает: когда вы обновляете страницу, вы запрашиваете новую копию ее с сервера, и это отбрасывает все, что было сделано на странице до сих пор, включая таймеры. Вы не можете запустить таймер, который работает, даже если страница, на которой он работает, была отброшена по какой-либо причине, если только вы не запускаете таймер на сервере, а не на клиенте.

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