FlipClock с перезагрузкой страницы браузера

319

03 апреля 2017, 05:47

Вопрос: Как сделать чтобы отсчет был с определенного момента и при перезагрузки страницы браузера не сбрасывался, а продолжал отсчет?

Использую: FlipClock.

Код:

var clock; 
 
clock = $('.clock').FlipClock({ 
  //clockFace: 'DailyCounter', 
  autoStart: false, //Отключаем автозапуск 
  countdown: true,  //Отсчет назад 
  language:'ru-ru', //Локаль языка 
  callbacks: { 
    stop: function() { 
      $('.message').html('The clock has stopped!') 
    } 
  }, 
 
}); 
 
clock.setTime(60); //Устанавливаем нужное время в секундах 
clock.setCountdown(true); //Устанавливаем отсчет назад 
clock.start(); //Запускаем отсчет

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script> 
 
  <div class="clock"></div>

Answer 1

Можно при первой загрузке устанавливать текущее время в куки или localStorage и проверять, если куки нет, то время 60, если есть, то 60 минус разница между текщим временем и временем в куках

var clock; 
 
clock = $('.clock').FlipClock({ 
  //clockFace: 'DailyCounter', 
  autoStart: false, //Отключаем автозапуск 
  countdown: true,  //Отсчет назад 
  language:'ru-ru', //Локаль языка 
  callbacks: { 
    stop: function() { 
      $('.message').html('The clock has stopped!') 
    } 
  }, 
 
}); 
 
if(!$.cookie('time')){ 
  $.cookie('time', new Date().getTime()); 
  var time = 60; 
}else{ 
  var time = parseInt(60 - (new Date().getTime() - $.cookie('time'))/1000); 
  if(time < 0){ 
    time = 0; 
  } 
} 
 
//или то же самое с localStorage 
/* 
if(!localStorage.getItem("time")){ 
  localStorage.setItem('time', new Date().getTime()); 
  var time = 60; 
}else{ 
  var time = parseInt(60 - (new Date().getTime() - localStorage.getItem("time"))/1000); 
  if(time < 0){ 
    time = 0; 
  } 
} 
*/ 
clock.setTime(time); //Устанавливаем нужное время в секундах 
clock.setCountdown(true); //Устанавливаем отсчет назад 
clock.start(); //Запускаем отсчет

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> 
 
  <div class="clock"></div>