Обратный отсчет онлайн. Бесплатные онлайн-генераторы таймера обратного отсчета. Скрываем таймер после окончания времени и выводим сообщение, что время истекло

Самый простой и удобный таймер обратного отсчета

HTML Countdown Clock Days Hours Minutes Seconds CSS body { text-align: center; background: #00ecb9; font-family: sans-serif; font-weight: 100; } .countdown-title { color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } .countdown { font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } .countdown-number { padding: 10px; border-radius: 3px; background: #00bf96; display: inline-block; } .countdown-time { padding: 15px; border-radius: 3px; background: #00816a; display: inline-block; } .countdown-text { display: block; padding-top: 5px; font-size: 16px; } Javascript function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { "total": t, "days": days, "hours": hours, "minutes": minutes, "seconds": seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); function updateClock() { var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); if (t.total

Чтобы таймер появился, необходимо элементу придать идентификатор timer и добавить условие в тег

Всё, таймер готов.

2 вариант.
Цифрами для таймера будет служить картинка. Также в этом таймере помимо минут и секунд доступны часы и дни. Наш таймер будет отсчитывать время до определенного дня.

Оформляем страницу

Таймер обратного отсчета

Для отображения времени будет использоваться картинка digits2_orange.png

Далее пишем js код

var t=Date.parse(deadline)-Date.parse(new Date());
var seconds = Math.floor((t/1000) % 60);
var minutes = Math.floor((t/1000/60) % 60);
var hours = Math.floor((t/(1000*60*60)) % 24);
var days = Math.floor(t/(1000*60*60*24));

$(function(){
$("#counter").countdown({
image: "pic/digits2_orange.png",
startTime: days+":"+hours+":"+minutes+":"+seconds,
timerEnd: function(){
$("#tut").html("Таймер завершил свою работу");
}
});
});
image - наша картинка
startTime - это как раз время оставшееся до 01.09.2017
timerEnd - то, что происходит по завершении работы таймера, в нашем случае в контейнер с идентификатором tut будет вставлена соответствующая надпись
Далее наш таймер

Осталось:

ДнейЧасовМинутСекунд

Оформляем
#layer{
width:600px;
text-align:center;
margin:0 auto;}

#counter{
margin:10pt auto 0 auto;
width:414px;}

Desc{
width:430px;
margin:0px auto;}

#days,#hours,#minutes,#seconds{
float:left;
font:13px Arial,Verdana,sans-serif;
width:50px;
margin-right:63px;
font-weight:bold;
color:#000;}

#seconds{margin-right:0px;}

CntSeparator {
font-size:50px;
margin:6px 7px;
color:#000;}
3 вариант.
На наш взгляд самый удобный. Также как и предыдущий показывает оставшееся количество дней, часов, минут, секунд. Не использует изображение для отображения счетчика.
Для работы нам понадобится библиотека jquery и файл

Оформляем страницу

Таймер обратного отсчета

// здесь нужная дата в формате гггг-мм-дд чч:мм:сс
var deadline="2017-08-20 00:00:00";

00
дни

00
часы

00
мин

00
сек

$(".countdown").downCount({
date: deadline,
},
function(){
/* действие после завершения таймера */
alert("Время истекло!");
});

И css для оформления внешнего вида
.countdown{
list-style:none;
margin:6px 0 0 0;
padding:0;
display: block;}

Countdown li{display: inline-block;}

/* здесь дни, часы, минуты, секунды */
.countdown li span{
width:100%;
color:#000;
font:18px Verdana;
display:inline-block;}

/* разделители. и: */
.countdown li.seperator {
color:#000;
font:16px Verdana;
vertical-align:top;}

Countdown li div{
margin:0;
color: #a7abb1;
font:8pt Verdana;}