Таймер обратного отсчета для сайта на PHP+Javascript

Говоря о таймере обратного отсчета следует учесть тот факт, что таймеры делятся на два вида, точнее сказать, их употребление бывает разное. В одном случае счетчику задается конечная дата, в другом же задается количество времени, отсчет ведется для каждого пользователя отдельно (этот вариант подходит для тех, кто проводит какие-то акции или скидки).

1. HTML

Для разметки построим контейнер блоков, каждый элемент которого будет отвечать за определенную часть времени, то есть секунды, минуты, часы, дни и недели.

2. CSS

Все вложенные блоки сделаем невидимыми и показывать будем только те, которые включены в настройках.

Сначала подключим свой шрифт с Google Fonts:

Задаем стандартные параметры для документа:

Остается написать классы для самого счетчика. Блок с таймером выровняем по центру и укажем auto-размер. Точные размеры будем задавать с помощью скрипта.

3. PHP

Как и говорилось ранее, в таймере предусмотрим два варианта, это отсчет времени к определенной дате (например, 1 мая 2018 года) и таймер по заданному времени (например, 12 часов). Этот выбор мы сделаем в настройках скрипта.

Поскольку видимость блоков (дни, минуты и т.д.) задается в конфиге, необходимо сделать генерацию html-кода:

Обработку времени будем делать на PHP с учетом серверного времени, чтобы время не зависело от настроек времени конечного пользователя, как это бывает при использовании Javascript:

4. Javascript

Первое что нам необходимо, это подключить фреймворк jQuery (о способах подключения можно почитать здесь)

Опишем функцию countdown_go(), она будет отвечать за вывод времени в блоки. При знаниях JS, функцию можно оптимизировать.

Последнее, что осталось, это запустить таймер, здесь используем стандартную функцию setInterval().

Посмотреть ДЕМО и скачать ИСХОДНИКИ.

Как установить на сайт?

Если вы не хотите разбираться и устанавливать, можете просто скачать исходники, создать на сайте папку countdown и залить туда файлы. А далее на сайт вставить через фрейм:

Советую обратить внимание на более усовершенствованный, бесплатный таймер с админпанелью и видеоинструкцией, скачать можно здесь.

Вот и все, остались вопросы – задаем в комментариях.

Может быть полезно

загрузка комментариев