Обратный отсчет сбрасывается, если я перезагрузить страницу - нужно установить его до некоторой даты

Question

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

Вот ссылка для просмотра таймера обратного отсчета, а также вы можете скачать и использовать его или посмотреть коды: https://timer.craftovdvlp.club/

А вот и скрипт:

$(document).ready(function() {

  $('#countdown2').ClassyCountdown({
    end: '1388468325',
    now: '1378441323',
    labels: true,
    style: {
      element: "",
      textResponsive: .5,
      days: {
        gauge: {
          thickness: .01,
          bgColor: "rgba(0,0,0,0.05)",
          fgColor: "#1abc9c"
        },
        textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
      },
      hours: {
        gauge: {
          thickness: .01,
          bgColor: "rgba(0,0,0,0.05)",
          fgColor: "#2980b9"
        },
        textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
      },
      minutes: {
        gauge: {
          thickness: .01,
          bgColor: "rgba(0,0,0,0.05)",
          fgColor: "#8e44ad"
        },
        textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
      },
      seconds: {
        gauge: {
          thickness: .01,
          bgColor: "rgba(0,0,0,0.05)",
          fgColor: "#f39c12"
        },
        textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
      }

    },
    onEndCallback: function() {
      console.log("Time out!");
    }
  });

});

<link href="http://timer.craftovdvlp.club/css/jquery.classycountdown.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://timer.craftovdvlp.club/js/jquery.classycountdown.js"></script>

<script src="http://timer.craftovdvlp.club/js/jquery.knob.js"></script>
<script src="http://timer.craftovdvlp.club/js/jquery.throttle.js"></script>

<div class="container">

  <div id="countdown2" class="ClassyCountdownDemo"></div>

</div>

PS если у кого есть или знаете ссылку на красивую линию кругового таймера обратного отсчета, буду очень благодарен за помощь)

Answer 1

Получите текущую временную переменную, вот так:

$(document).ready(function() {
    var d = new Date();
    var now = d.getTime();

    $('#countdown2').ClassyCountdown({
        end: '1388468325',
        now: now,
        ....
    });
});

Answer 2

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

now также следует создавать каждый раз, когда вы перезагружаете страницу, как указано в ответе @Himanshu Upadhyay и в комментарии @Santi.

IE

var end = document.cookie.replace(/(?:(?:^|.*;\s*)timerEnd\s*\=\s*([^;]*).*$)|^.*$/, "$1");
end = end || '' + Date.now() + 15 * 60 * 1000; // 15 minutes
document.cookie='timerEnd=' end;
$('#countdown2').ClassyCountdown({
    end: end,
    now: '' + Date.now(),
    // ...etc