Непрерывный таймер обратного отсчета в Javascript или Jquery

Я хочу создать простой таймер обратного отсчета в javascript или jquery.

Я реализовал это с помощью JS, но проблема, с которой я сталкиваюсь, заключается в том, что если пользователь обновляет страницу, то таймер получает обновление.

What I want is timer should not get the refresh. Say timer is 5 min and if user refresh pages after 1 min the timer should continue to start from 4 min instead of 5 mins. Here is code snippiet. Its refresh the timer on page refresh. 

var timeoutHandle;
function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    function tick() {
        var counter = document.getElementById("timer");
        var current_minutes = mins-1
        seconds--;
        counter.innerHTML =
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if( seconds > 0 ) {
            timeoutHandle=setTimeout(tick, 1000);
        } else {

            if(mins > 1){

               // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
               setTimeout(function () { countdown(mins - 1); }, 1000);

            }
        }
    }
    tick();
}

countdown(2);
<div id="timer">2:00</div>


javascript timer jquery countdowntimer
person Mohammed Sabir    schedule 12.12.2017    source источник
comment
Вам нужно сохранить значение в постоянном хранилище, таком как файлы cookie или LocalStorage.   -  person Filnor    schedule 12.12.2017
comment
Пожалуйста, взгляните на sessionStorage. sessionStorage сохраняет данные только во время вашего текущего сеанса просмотра, так что это поможет в вашем случае.   -  person palaѕн    schedule 12.12.2017
comment
тогда мне нужно проверять это каждый раз при загрузке страницы?   -  person Mohammed Sabir    schedule 12.12.2017

Ответы (1)


arrow_upward
2
arrow_downward

Вы просто обновляете sessionStorage вместе со своим счетчиком и читаете его при запуске счетчика. К сожалению, связанный фрагмент не работает в stackoverflow из-за междоменных политик, поэтому здесь, на codepen https://codepen.io/anon/pen/opNpVe

function countdown(seconds) {
  seconds = parseInt(sessionStorage.getItem("seconds"))||seconds;

  function tick() {
    seconds--; 
    sessionStorage.setItem("seconds", seconds)
    var counter = document.getElementById("timer");
    var current_minutes = parseInt(seconds/60);
    var current_seconds = seconds % 60;
    counter.innerHTML = current_minutes + ":" + (current_seconds < 10 ? "0" : "") + current_seconds;
    if( seconds > 0 ) {
      setTimeout(tick, 1000);
    } 
  }
  tick();
}

countdown(120);
person Joschi    schedule 12.12.2017
comment
Спасибо чувак!!! В моем приложении есть много способов, которыми пользователь может получить доступ к странице, например, по электронной почте или через сайт, и мне просто нужно предоставить пользователю все права на 5 минут с момента публикации статьи после этого просто права чтения - person Mohammed Sabir; 12.12.2017