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