Счетчик обратного времени

Предисловие

Бывает, что на сайте требуется установить счетчик времени, который бы показывал оставшееся время до какого либо мероприятия. Это наглядно, эффектно и красиво.

Покопавшись в интернете, можно найти несколько скриптов для реализации такого функционала. Мы остановились на одном из них – countdown. Безусловно, любой программист без труда сможет с ним разобраться и установить на сайт. Но наша задача – делать так, чтобы все работало без вмешательства специалистов и настраивалось легко и наглядно.

Возможности компонента «Счетчик обратного времени»

И так. Рассмотрим на примерах возможности рассматриваемого компонента. Так как в компоненте учитываются не очевидные, на первый взгляд, моменты, попробуем разобрать максимум разных задач и описать настройки компонента для их решения.

1. Показать оставшееся время до мероприятия, которое будет проведено в 2013 году 20 января в 10-30 по московскому времени.

Устанавливаем галочку «Работаем с серверным временем» - это позволит нам не зависеть от часовых поясов и установок времени на локальных компьютерах посетителей. Учитываем время на сервере – обычно там стоит как раз московское время, но на всякий случай нужно проверить (серверное время указано в настройках компонента). При этом начало мероприятия сработает у всех в один момент, но в разное время. Т.е. в Барнауле, при разнице с Москвой в 3 часа, счетчик сработает в 13-30 (плюс три часа к заданному) - как раз в это время в Москве будет 10-30.

Устанавливаем время и выбираем шаблон:

Результат:

2. Показать оставшееся время до нового года

Т.к. в нашей стране несколько часовых поясов, то и новый год у всех происходит не сиюминутно. Поэтому в данном случае нам необходимо работать с локальным временем, установленном на компьютере пользователя. Отключаем параметр серверного времени, задаем надпись поздравления и указываем первое января следующего года и время 00-00

Скриншот:

3. Показать оставшееся время до нового года - вариант 2

После того, как мы сделали предыдущий пункт, сразу же возникает желание – автоматизировать процесс. Т.е. не вводить каждый раз дату следующего года, а чтобы сайт сам понимал, до какого года считать.

Ставим галочку в параметре «Зацикливание счетчика». Выбираем шаг «Год», указываем период – 1. Теперь после окончания отсчета заданного периода, компонент автоматически прибавит 1 год к указанной дате и начнет отсчет заново.

Скриншот:

4. Показать оставшееся время до нового года - вариант 3

После решения предыдущей задачи, возникает следующая. После того, как пробьют часы, счетчик сразу же нас поздравит с новым годом (выдаст нашу надпись поздравления) и начнет отсчитывать свои секунды заново до следующего года. И если посетитель чуток опоздал и зашел секундой позже заветного момента – он увидит не поздравления, а удручающую картину – до нового года осталось 365 дней :).

Чтобы этого не было, нам нужно указать задержку срабатывания повторного отсчета. И в эту задержку бы поздравлял нас с новым годом. Как раз 10 праздничных дней для этого достаточно. Для этого делаем следующие настройки: Ставим галочку «Отложить повторный запуск счетчика на некоторое время», указываем шаг – день и период – 10.

Скриншот:

Обратите внимание! Для того, чтобы отложенный запуск не создавал дополнительных мучений с расчетом промежутка до следующего срабатывания, данный параметр никак не влияет на данные параметра «Зацикливание счетчика». Т.е. фактически счетчик просто не будет вам показывать, что он уже начал отсчитывать следующий период, а будет отображать надпись с поздравлением.

Результат:

5. Показать оставшееся время до конца рабочей недели.

Фактически эта задача совпадает с предыдущей, только временные периоды поменьше.

И так, ставим дату – ближайшую пятницу по календарю и время 18-00 (считаем, что рабочий день заканчивается в есть часов). Зацикливаем счетчик, чтобы он каждую неделю автоматически считал нам остатки рабочих часов и дней – ставим период зацикливания 7 дней.

Теперь нам нужно сделать так, чтобы до понедельника висела надпись – «Ура, выходные!». Устанавливаем отложенный запуск на два дня и весь вечер пятницы – это 2*24 + 6 часов остатка пятницы. Получается 54 часа.

Результат:

6. Хотелось бы прямо в тексте иметь возможность видеть данный счетчик.

Нет ничего проще, пожалуйста: до следующего дня рождения нашей компании осталось:

Компонент позволяет указать ID элемента, куда следует встроить счетчик. Обратите внимание, что графические счетчики так просто не встанут в текст – они его немного покорежат :)

Послесловие

Компонент «Счетчик обратного времени» имеет и другие настройки. Например, может перенаправить посетителя по окончании отсчета на указанную страницу. Можно указать компактные или расширенные режимы отображения, указать количество отображаемых сегментов (дни, часы, минуты..).

Помимо функционала, мы подготовили для вас несколько красивых графических шаблонов. Мы постарались продемонстрировать некоторые из них в этом обзоре.

Будем рады, если компонент вам пригодился!

Компонент живет тут: Компонент для 1С-битрикс: Счетчик обратного времени