Есть такой таймер flipclock на странице:
var clock;
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter', //вид счетчика (с количеством дней)
autoStart: false, //Отключаем автозапуск
countdown: true , //Отсчет назад
language:'ru-ru', //Локаль языка
callbacks: { //Действие после окончания отсчета
stop: function() {
}
}
});
clock.setTime(3600 * 24); //Устанавливаем нужное время в секундах
clock.setCountdown(true); //Устанавливаем отсчет назад
clock.start(); //Запускаем отсчет
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<div class="clock"></div>
Но проблема в том, что нужен отсчет без дней, а с 24:00 до 00:00 каждый день. Т.е. таймер доходит до 00:00 и опять начинает заново. Нужно ли для этого localStorage
если в режиме реального времени (в 20:00 получается должен отображать 04:00 , осталось 4 часа как например). Как можно допилить код?
Если такой пример:
var clock;
clock = new FlipClock($('.clock'), 5, {
clockFace: 'DailyCounter', //вид счетчика (с количеством дней)
autoStart: true, //Отключаем автозапуск
countdown: true , //Отсчет назад
language:'ru-ru', //Локаль языка
callbacks: { //Действие после окончания отсчета
stop: function() {
clock.setTime(5);
clock.setCountdown(true);
clock.start();
}
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<div class="clock"></div>
То я так понимаю не будет работать как положено, потому как уже второй отсчет почему-то не с 5, а с 3-х секунд идет. И автозапуск работает с момента обновления страницы, а нужно не зависимо от обновления чтобы таймер работал.