Скрипт 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 коде.