Скрипт: "Таймер обратного отсчета".

До наступления часа Х осталось ... ... ...

Наверное Вы уже видели на разных сайтах обратный отсчет до наступления какого-то события. Например, " До окончания скидочной акции осталось ХХ : ХХ : ХХ ", соответственно, Вы видели вместо "ХХ : ХХ : ХХ" электронные часы, которые отсчитывают время в обратной последовательности. Я, например, такой скрипт использовал для отсчета времени до наступления 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 г. осталось (дн., ч., мин., сек.):