Скрипт CallMe 1. 7; заказ обратного звонка с сайта

Скрипт CallMe 1.7 – заказ обратного звонка с сайта

Назар Токар

Всем привет. Для начала немного лирики: я несколько раз встречал в сети клоны Callme, которые продаются находчивыми предпринимателями. На мой вопрос “WTF?” резонно отвечают, что идея не нова и сделать её может любой школьник. Тем не менее этот школьник берёт именно готовый Callme и, немного переделав, продаёт от своего имени. Напрашивается вопрос: если всё так просто, зачем красть чужое? С другой стороны, мне даже приятно, что маленький и по большому счёту очень простой скрипт пригодился стольким вебмастерам.

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

Плагин T Countdown

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

Но мы случайно наткнулись на T Countdown и решили его рассмотреть, потому что он удовлетворяет нашим критериям:

• Он бесплатный
• Не требует регистрации и создания аккаунта
• Неплохой рейтинг 4,5 звезд
• Более 20,000+ активных установок
• Использует CSS для анимации вместо Flash

Единственным недостатком можно считать довольно скучный набор встроенных шаблонов отображения таймера. Но это легко можно подправить на свой вкус, если вы немного разбираетесь в CSS.

Шаг 3: Обратный отсчет

У нас есть значение timeLimit, которое представляет собой начальное время. А также значение timePassed, которое указывает, сколько времени прошло с момента начала отсчета.

Увеличим значение timePassed на секунду и пересчитаем timeLeft с помощью функции setInterval . Для этого реализуем метод startTimer, который будет:

• Устанавливать интервал счетчика.
• Увеличивать значение timePassed каждую секунду.
• Пересчитывать значение timeLeft.
• Обновлять значение метки в шаблоне.

Сохраним ссылку на этот объект интервала в переменной timerInterval, чтобы очистить его при необходимости.

У нас есть метод, который запускает таймер обратного отсчета. С его помощью запустим таймер.

Теперь таймер отсчитывает время. Реализуем изменение цвета временной метки при различных значениях.

Использование jQuery таймера

Просто вставьте следующие строки кода в вашем файле с JavaScript.

script.js

Конечно же, нужно подключить CSS и JS файлы таймера к вашей странице.

Цикличность

Для того, чтобы сделать таймер цикличным, например посчитать оставшееся время до следующего дня, достаточно изменить несколько строк в коде. Файл scripts.php будет выглядеть так:

Что еще?

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