FlipClock counter обратный отсчет каждый день

426

07 июля 2017, 06:15

Есть такой таймер 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-х секунд идет. И автозапуск работает с момента обновления страницы, а нужно не зависимо от обновления чтобы таймер работал.

Answer 1

Прежде, чем инициализировать таймер, нужно высчитать 86400 - x = y, где 86400 - кол-во секунд в сутках, x - текущее время в секундах, y - кол-во секунд до 00:00.

Далее "запускаем" таймер с полученным y, а в callback'e уже запускаем его заново со значением в 86400.

Data = new Date(); 
var time = 86400 - (Data.getHours()*3600 + Data.getMinutes()*60 + Data.getSeconds()); 
console.log(time); 
var clock; 
clock = new FlipClock($('.clock'), time, { 
    clockFace: 'DailyCounter', //вид счетчика (с количеством дней) 
    autoStart: true,          //Отключаем автозапуск 
    countdown: true	,           //Отсчет назад 
    language:'ru-ru',           //Локаль языка 
    callbacks: {               //Действие после окончания отсчета 
        stop: function() { 
          clock.setTime(86400);   
          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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

не удаляется класс при нажатии

класс active не удаляется при нажатии на другую кнопку

276

CSS

height: 100% для картинок во flex-контейнере

Решил сверстать адаптивную галерею картинок на flexboxПри этом столкнулся с неприятным багом - блоки с картинками отказываются правильно растягиваться...

311

CSS