Тут две задачи:
- из строки «часы:минуты:секунды» получить объект Date с ближайшим в будущем моментом с этим часом, минутой и секундой;
- запустить таймер обратного отсчёта до этой Даты.
Сделать объект 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