0

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

1 ответ 1

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>

1
  • Спасибо!!!!!!!!!!!!!!!!!!! 5 июл 2017 в 18:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.