@Welaurs

Как сделать отсчёт времени до определённой даты?

Добрый день. Даётся время в формате часы:минуты:секунды. Как можно грамотно реализовать отсчёт до этого времени от текущего?
  • Вопрос задан
  • 1265 просмотров
Решения вопроса 2
twobomb
@twobomb
Если только часы:минуты:секунды то можно так. Или чуть поменьше текста.
Ответ написан
sergiks
@sergiks Куратор тега JavaScript
♬♬
Тут две задачи:
  1. из строки «часы:минуты:секунды» получить объект Date с ближайшим в будущем моментом с этим часом, минутой и секундой;
  2. запустить таймер обратного отсчёта до этой Даты.


Сделать объект Date на сейчас и его копию. Копии установить час, минуту и секунду из строки. Если получился объект в прошлом, накинуть один дополнительный день.

Обратный отсчёт – запускать одну и ту же функцию по несколько раз в секунду для плавности отображения времени, т.к. таймеры в JavaScript не точные и если запускать 1 раз в секунду, секунды могут «икать».

В функции берем текущее время, сравниваем с заданным. Показываем остающиеся часы-минуты-секунды. И вызываем себя же через сколько-то миллисекунд. Если уже наступило целевое время, выводим другой текст и более не вызываем себя.

Код
/**
 * Из строки времени в формате HH:MM:SS
 * делает объект Date
 * с ближайшим, после текущего момента, таким временем.
 * @param String строка времени
 * @return Date Object
 */
function parseTime(s) {
  var now = new Date(), D = new Date(now.getTime()), HMS = s.split(':');

  if( HMS.length !== 3) throw({message:"неверный формат времени"});
  
  HMS = HMS.map(function(t){return parseInt(t)}); // перевести строки в целые
  
  D.setHours(HMS[0]);
  D.setMinutes(HMS[1]);
  D.setSeconds(HMS[2]);
  
  if( D < now) D.setDate( D.getDate() + 1);
  
  return D;
}

/**
 * добивает число нулями до двух позиций.
 *  3 -> 03
 * 13 -> 13
 */
function pad(n, len, char) {
  var s = n.toString(10);
  char = char || '0';
  len = len || 2;
  if( s.length >= len) return s;
  return (Array(1+len).join(char) + n).slice(-len);
}

/**
 * Выводит в заданный DOM-элемент время, 
 * оставшееся до даты-времени в объекте toDate
 */
function countdown( toDate, el) {
  var diff = toDate.getTime() - new Date().getTime()
    , H
    , M
    , S = Math.floor(diff/1000)
  ;
  
  if( S <= 0) { //  время прошло
    el.innerText = "--:--:-- Ой, всё!";
    return;
  }
  
  H = Math.floor(S/3600);
  S = S % 3600;
  M = Math.floor(S/60);
  S = S % 60;
  
  el.innerText = '' +pad(H) +':' +pad(M) +':' +pad(S);
  
  setTimeout( countdown.bind(this, toDate, el), 111);
}

countdown(
  parseTime('15:00:00'),
  document.querySelector('h1.question__title')
);

Если приведённый код выполнить в консоли/скретчпаде на этой странице, вместо заголовка вопроса появится таймер отсчёта.

Fiddle
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@skeevy
Frontend WebDev
Поиграй с кодом этого таймера
javascript.ru/forum/misc/40828-tajjmer-obratnogo-o...

Мне нужен был таймер, этот не подошел, но описанный тобой функционал есть
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы