Варіант 1
Деякі події на сайті зручно візуалізувати за допомогою таймера, який виробляє зворотний відлік часу в секундах. Поділюся простим прикладом коду, який сповна виконує дану задачу.
function timer(){
var obj=document.getElementById(‘timer_inp’);
obj.innerHTML–;
if (obj.innerHTML==0){
alert(‘Hello’);
setTimeout(function(){},1000);
} else {
setTimeout(timer,1000);
}
}
setTimeout(timer,1000);
Залишилося: 10 сек.
Між тегом span необхідно встановити своє значення (у секундах), від якого буде проводиться зворотний відлік. По закінченню часу лічильника в прикладі з’являється модальне вікно з написом Hello.
У місці, де викликається повідомлення alert(‘hello’), можна додати свою логіку, яка буде виконуватися по закінченню відліку.
Demo — приклад 1
Варіант 2
Цей варіант відрізняється від попереднього тим, що візуалізація зворотного відліку проводиться з показом залишку днів/годин/хвилин/секунд. Більш зручний для великих часових інтервалів, за зрозумілих причин, що показувати наприклад: тиждень в секундах — не дуже прикольно буде виглядати. Наведений нижче код використовує бібліотеку JQuery, тому її слід попередньо підключити.
Залишилося: 0 д.
00 год.
00 хв.
00 сек.
//
