Скрипт обратного отсчета времени CountDown
Скрипт: "Таймер обратного отсчета".
До наступления часа Х осталось … … …
Наверное Вы уже видели на разных сайтах обратный отсчет до наступления какого-то события. Например, " До окончания скидочной акции осталось ХХ : ХХ : ХХ ", соответственно, Вы видели вместо "ХХ : ХХ : ХХ" электронные часы, которые отсчитывают время в обратной последовательности. Я, например, такой скрипт использовал для отсчета времени до наступления 2022 года осталось ХХ дней, ХХ часов, ХХ минут.
После наступления часа Х, в данном случае 2022 года, обратный отсчет прекращается и выводится другая надпись, в данном случая я выводил: "С наступившим 2022 годом!"
В принципе какое событие наступит совсем не важно, скрипт можно настроить на абсолютно любую дату. По окончании обратного отсчета, в выводимой надписи тоже можно настроить абсолютно любой текст. Например, "С наступившим 2022 годом!"
Здесь настраиваются всего 2 параметра:
- дата отсчета;
- надпись, которая выводится по окончании отсчета (по наступлению даты).
Посмотрите, как работает скрипт.
Для подключения таймера обратного отсчета к своему сайту нужно отредактировать текстовую надпись в строке:
eventstr="С наступившим 2022 годом!";//Эта строка выводится по окончанию отсчета
Редактируйте то, что находится в кавычках "…" (в данном случае это текст "С наступившим Новым 2022 годом!"). Будьте внимательны, кавычки " " должны остаться!
Следующая строка:
ountdownid.innerHTML="До 2022 года осталось:<br>"+dday+ " " +ddaystr+", "+dhour+" "+dhourstr+", "+dmin+" "+dminstr+" и "+dsec+" "+dsecstr;
Здесь редактируется текстовая надпись, которая выводится перед таймером отсчета до наступления события Х. В данном случае "До 2022 года осталось". Будьте внимательны, кавычки " " должны остаться!
Последняя строка для редактирования:
CountDowndmn(2022,01,01);//Дата отсчета: год, месяц, число
Здесь нужно указать дату Х, до которой будет вестись обратный отсчет в формате: ГОД, МЕСЯЦ, ДЕНЬ.
Дальше редактируете те файлы сайта, на которых будет выводится таймер (будем считать, что это файл index.htm).
В нужном месте файла index.htm добавляется код:
<div align=center id=countdown></div>
<script>…</script>
1-я строчка даёт команду на вывод таймера, далее подключается скрипт.
Используя стили CSS, таймеру можно придать любой внешний вид.
Есть скрипт попроще
До 1.1.2038 г. осталось (дн., ч., мин., сек.):
Или вот так:
До 00:00:00 08.08.2088 осталось (дн., ч., мин., сек.):