Представляем очень практичное устройство отсчёта времени для дома и кухни. Проект был разработан по причине того, что хоть всяких таймеров много в разных устройствах (часы, смартфоны и т. д.), но все они не удобны в эксплуатации в условиях кухни или мастерской. Управление должно быть максимально упрощено — никаких лишних кнопок, которые не сразу и вспомнить какая за что отвечает.
Схема принципиальная таймера с энкодером
Когда-то давно были в продаже механические таймеры — они реально были просты в использовании. Вот и решено объединить эту простоту с современной базой. Так возник этот таймер с регулятором — энкодером. В нём как и в механическом прототипе, можно увеличивать и уменьшать время отсчета. Основа — микроконтроллер ATtiny 2313. Вот к нему прошивка в архиве.
Как работает устройство
Увеличение/уменьшение времени происходит скачкообразно сразу на несколько секунд. Кроме того, время можно приостановить.
Последние 5 минут сигнализируются короткими двойными пиками каждую минуту. А последние 15 секунд пикает каждую секунду.
Возможность выключения текущего сигнала пищалки осуществляется нажатием на энкодер или поворотом его ручки в любую сторону.
С целью максимального упрощения для пользователя управления, таймер обратного отсчета не имеет никаких других лишних функций.
Рекомендуется ещё добавить красное пластиковое стекло перед дисплеем, чтобы улучшить видимость цифр.
И вместо распознавания временных шагов на 15, 30, 60 секунд, лучше было бы определить скорость поворота ручки энкодера и на этой основе изменять время. Медленное вращение — подсчитывает отдельные секунды, быстрое — шаги в несколько минут.
Корпус… До него дело так и не дошло ? Таймер уже долгое время так и используется в полуоткрытом виде: снизу 3 пальчиковые батарейки, спереди трёхцифровой индикатор LED, а сверху ручка регулятора выбора времени.
Видео работы таймера
Вот видео, демонстрирующее работу устройства при различных режимах, а также механический секундомер рядом для сравнения.
2shemi.ru
Приветствую вас дорогие читатели! В этом уроке я покажу, как сделать простенький таймер обратного отсчета! Итак, с таймерами в интернете можно встретиться довольно таки часто. Например, когда предлагают записаться на какой-нибудь семинар или бизнес тренинг, на сайте устанавливают время обратного отчета, по истечению которого уже нельзя будет принять участие в каком-то мероприятии. Сделать такой таймер для своего сайта очень просто! В этом уроке я не стал использовать никаких дополнительных библиотек и Фреймворков типа «jquery» и решил написать весь код на чистом javascript, в одном html файле.
Что умеет данный таймер?
Давайте опишем условия работы нашей программки:
- Можно установить количество дней, минут и секунд
- Каждую секунду происходит уменьшение времени соответственно на 1 секунду
- По истечению времени появится всплывающее окно с текстом о том, что таймер сработал
Как реализовать таймер?
Весь код можно рассмотреть или скачать ниже, а чтобы лучше разобраться в уроке, разбирать код мы будем по отдельности! HTML код:
<div id="timer"> <div id="hour">11</div> : <div id="minute">56</div> : <div id="second">45</div> </div>
Здесь все просто — имеется обертка для цифр с идентификатором — «timer», а в нее вложены еще 3 блока для цифр с соответствующими ID.
- это пробел, который чуть-чуть пододвигает двоеточие.
Если вам нужно задать начальное значение для отсчета, то изменять его нужно как раз в этом html коде. CSS код:
#timer{ margin: 20px auto; text-align: center; color: #333; font-family: fantasy; font-size: 100px; cursor: default; } #timer div{ display: inline; }
Здесь мы задаем стили отдельно для обертки, прописывая стиль шрифта, его размер, цвет и так далее, а также прописываем свойство — «display: inline» для внутренних div’ов, чтобы цифры выстроились в одну полоску. Ну и самое интересное — JavaScript код:
function timer(){ var hour = document.getElementById('hour').innerHTML; var minute = document.getElementById('minute').innerHTML; var second = document.getElementById('second').innerHTML; var end = false; if( second > 0 ) second--; else{ second = 59; if( minute > 0 ) minute--; else{ second = 59; if( hour > 0 ) hour--; else end = true; } } if(end){ clearInterval(intervalID); alert("Таймер сработал!"); }else{ document.getElementById('hour').innerHTML = hour; document.getElementById('minute').innerHTML = minute; document.getElementById('second').innerHTML = second; } } window.intervalID = setInterval(timer, 1000);
Как видите, мы создали функцию — «timer», которая будет срабатывать каждую секунду. Срабатывание этой функции достигается за счет установленного интервала (setInterval):
window.intervalID = setInterval(timer, 1000)
Интервал (функция) принимает два параметра: название функции, которую нужно вызывать и время в миллисекундах. 1000 миллисекунд — это одна секунда. Этому интервалу мы присваиваем идентификатор — «intervalID «, для того, чтобы можно было остановить интервал, когда выйдет время. Window означает, что переменная будет глобальной и доступна внутри функции. Теперь давайте разберем непосредственно саму функцию «timer». Сначала мы считываем текущие часы, минуты и секунды в переменные с соответствующими названиями. Переменная — «end» нужна для того, чтобы остановить уменьшение таймера и вывести фразу — «Таймер сработал!». По умолчанию выставляем в false (ложь). Далее идут простые условия:
Если секунд больше 0, то уменьшаем их на 1, иначе присваиваем им максимальное значение (60) и проверяем точно также минуты, а потом и часы
В итоге, если окажется, что количество оставшихся часов, и минут и секунд равно 0, то изменяем переменную end на true. Далее, мы просто проверяем переменную end — если она равна истине, значит, таймер сработал и нужно вывести фразу и удались интервал, иначе просто обновляем значения часов, минут и секунд. Весь код:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf8'> <title>Создаем таймер обратного отсчета - Seo блог sergey-oganesyan.ru</title> <script> window.onload = function(){ function timer(){ var hour = document.getElementById('hour').innerHTML; var minute = document.getElementById('minute').innerHTML; var second = document.getElementById('second').innerHTML; var end = false; if( second > 0 ) second--; else{ second = 59; if( minute > 0 ) minute--; else{ second = 59; if( hour > 0 ) hour--; else end = true; } } if(end){ clearInterval(intervalID); alert("Таймер сработал!"); }else{ document.getElementById('hour').innerHTML = hour; document.getElementById('minute').innerHTML = minute; document.getElementById('second.
t;second">45</div> </div> </body> </html>
Как видите, создать таймер обратного отсчета очень просто! Прилагаю пример и исходный файл данного урока по javascript, на этом у меня все, подписывайтесь на обновления, желаю вам удачи, пока!
sergey-oganesyan.ru
Счетчик обратного отсчета на сайт
Счетчик обратного отсчета позволяет повысить конверсию вашего сайта или landing page. Используя таймер обратного отсчета, можно гибко выстроить коммуникацию с вашими пользователями. Рассмотрим основные типы таймера обратного отсчета:
Счетчик до определенной даты:
Данный тип позволяет выставить время окончания таймера, причем учитывая локальное время пользователя. То есть, если счетчик автоматически будет пересчитывать время для пользователей, находящихся в разных часовых поясах. Теперь, вам не нужно ломать голову как закончить акцию по всей России в один момент времени.
Либо вы можете выбрать конкретный часовой пояс в таймере обратного отсчета. Данный вариант обычно используют локальные сайты или интернет-магазины из конкретного города или региона.
Счетчик на промежуток времени:
Данный формат счетчика эффективно используется для таймеров, которые отсчитывают несколько часов или минут, заставляя посетителя сайта быстрее сделать нужное целевое действие. Например «У вас есть 10 минут, чтобы оформить заявку получить скидку 30% на все товары».
Начало отсчета может быть прямо сейчас, либо отсчет таймера начнется с момента первого посещения клиентом сайта. Таймер будет автоматически отсчитывать время для каждого нового пользователя, который зашел на страницу.
Зацикленный таймер:
Один из самых популярных (и наиболее востребованных) типов счетчика обратного отсчета. Каждый день, таймер может перезапускаться с определенной периодичностью в нужное время. Можно настроить счетчик на локальное время пользователя, либо жестко задать часовой пояс.
Данный вид таймеров используется для перезапуска акций на самые популярные товары. Например «Успейте сегодня купить сайт по акции со скидкой 40%».
Вставка скрипта обратного отсчета
Вы сможете легко установить скрипт обратного отсчета Megatimer. Теперь нет необходимости искать Javascript и jquery таймер обратного отсчета, так как счетчик легко устанавливается через html вставку таймера. Html код счетчика генерируется на сервисе и его нужно просто вставить на сам сайт.
Обратная связь
Если у вас есть предложения по улучшению качества сервиса или по функционалу таймера – пишите на почту support@lpmotor.ru Если вы уже используете наш таймер обратного отсчета на своем сайте – напишите нам о вашем сайте и расскажите, как вы используете функционал счетчика. Лучшие истории будут попадать в раздел «Примеры использования», где вы сможете прорекламировать свою деятельность и свой сайт полностью бесплатно.
Web-благотворительность
Мы надеемся, что вам понравился наш сервис и генерируемые таймеры обратного отсчета, так как мы делали его с любовью и не собираемся на нем зарабатывать. Мы разрабатываем классные и бесплатные сервисы, которые помогут тысячам владельцев сайтов решить их маленькие проблемы.
megatimer.ru
От автора: разнообразные акции, распродажи, скидки и т.д. – распространенный маркетинговый ход современных торговых отношений, который часто используется в интернет магазинах. Наверное, каждый из Вас сталкивался с таким понятием как таймер обратного отсчета, определяющий сначала фиксированную дату начала, а затем время до окончания какой-либо акции или распродажи. Подобный скрипт исключает необходимость лишних подсчетов и делает сайт более эффектным и современным. В этом уроке я предлагаю Вам создать это полезное веб-приложение вместе.
Логику скрипта мы напишем на языке Javascript, с использованием библиотеки jQuery. А визуальное оформление создадим с помощью обычного HTML. Для тех, кто не знает, библиотека jQuery – это библиотека, написанная на языке Javascript. Если сказать другими словами, то это набор готовых функций, для облегчения взаимодействия Javascript и HTML.. Эта библиотека предоставляет нам очень большой выбор различных функций и методов по доступу к атрибутам и содержимому выбранных элементов. Итак, давайте приступим.
1. Создание HTML разметки.
Первым делом создадим визуальную часть нашего скрипта, то есть разметку на основе HTML. Для этого создадим новый файл под названием index.html. Вот с таким содержимым:
Как Вы видите имеется общий контейнер с идентификатором id=»timer_wrap», в котором будет расположен наш таймер. В нем содержится вспомогательный контейнер с идентификатором id=»clock», который служит для более красивого отображения таймера. Далее обратите внимание, что в контейнерах с идентификаторами id=’day’, id=’hour, ‘id=’min’, id=’sec’ будут содержатся — дни, часы, минуты и секунды соответственно. Между этими контейнерами вставлены блоки с идентификаторами id=»razd», которые служат разделителями для каждого элемента таймера (как обычно разделитель для времени — это символ «:»). Так как каждый элемент времени таймера (секунды, минуты, часы, дни) выводится в двузначном формате, то для более красивого отображения времени я предусмотрел для каждого разряда времени свой блок. К примеру, для отображения секунд предусмотрен блок с идентификатором id=’sec’ и для каждого разряда предусмотрен свой блок: для единиц — блок id=’sec1′, для десятков — id=’sec0′. Остальные элементы времени по аналогии.
Теперь необходимо создать файл для хранения правил css, для нашего скрипта, как Вы видите я подключаю файл style.css, поэтому его и создадим. Вот его содержимое:
Теперь, если посмотреть в браузере, то мы увидим вот такую заготовку для нашего таймера.
Теперь нам осталось создать сам таймер и вывести на экран.
2. Подготовка к кодированию на Javascript.
Первым делом давайте создадим пустой файл script.js, в котором будут храниться скрипты на языке Javascript, и сохраним его в папке js. Далее давайте подключим этот файл к нашему скрипту (между тегами head):
Далее нам понадобится библиотека jQuery, которую можно скачать с официального сайта http://jquery.com кликнув по кнопочке DOWNLOAD. После скачивания библиотеки также ее сохраним в папке js и подключим к нашему скрипту:
3. Создаем логику таймера.
Итак, для начала перейдем в файл script.js и откроем код для работы с библиотекой jQuery:
Как Вы помните, для того что бы начать работу с библиотекой jQuery, необходимо выбрать элемент document нашей страницы, и для него вызвать обработчик события ready (который сработает после полной загрузки страницы), и в этом обработчике описываем функцию в теле которой и ведем кодирование с использованием библиотеки jQuery.
Теперь приступим к написанию логики таймера. Работа таймера будет основана на периодическом вызове функции, которая при каждом своем вызове, будет измерять количество миллисекунд, от текущего времени, и до времени отсчета (время от которого необходимо вести обратный отсчет), при этом выводя результат на экран в удобном нам виде (в виде стандартных часов). Конечно, эту функцию мы будем вызывать с интервалом в одну секунду, для точного вывода секунд нашего таймера. То есть за один вызов функции мы будем проводить один замер времени и выводить его на экран.
Итак, давайте создадим функцию get_timer() которая и будет функцией вызова таймера. Далее в этой функции создадим переменную date_new, в которой будем хранить дату от которой нужно вести обратный отсчет. Дата будет представлять собой строку формата:
Месяц День,Год ЧЧ:ММ
К примеру, если мы хотим назначить датой отсчета 1 июля 2012 года и время 12.00, то строку необходимо сформировать таким образом:
July 1,2012 12:00
Теперь давайте приведу часть кода функции для дальнейших пояснений:
Обратите внимание, далее создаем объект класса Date (записываем его в переменную date_t) и передаем его конструктору — дату отсчета времени. Класс Date предназначен для работы с датами и временем. Если конструктору, не передавать ни каких значений, то будет создан объект класса Date с текущими датой и временем. Которую, мы можем вывести, если нам это необходимо. Дата и время в объекте Date, хранятся не в явном виде, а в виде количества миллисекунд прошедших с 0 часов 0 минут 1 января 1970 года. Поэтому мы можем узнать, сколько пройдет миллисекунд между временем отсчета и текущей датой, что мы и делаем и сохраняем результат в переменную timer.
То есть в переменной timer у нас содержится количество миллисекунд до времени отсчета. Значит, нам осталось только узнать, сколько это будет дней, часов, минут и секунд, а затем просто вывести это на экран. Первым делом переведем миллисекунды в привычное для нас время (продолжаем кодировать функцию get_timer()):
Итак, для начала сделаем небольшую проверку, но то, не закончен ли отсчет. Если количество миллисекунд в переменной date_t больше чем в переменной – date, значит необходимо продолжать отсчет. Если же меньше – то мы с помощью jQuery производим выборку блока с идентификатором clock ($(«#clock»)) и при помощи метода html() вставляем в выбранный блок данные, которые переданы ему параметром (метод html() выводит данные, которые переданы ему параметром, в выбранный блок).
Первым делом найдем количество дней до даты отсчета. Для этого переменную таймер делим на количество миллисекунд в одном дне, а это можно узнать из выражения – 24*60*60*1000 (в одной секунде 1000 миллисекунд, в одной минуте 60 секунд, в одном часе 60 минут и в одном дне 24 часа). С помощью функции parseInt() мы отбрасываем у результата дробную часть, так как эта функция, приводит строку, переданную ей параметром, к целочисленному результату (попросту говоря, возвращает число, а если это невозможно, то NaN). Далее если получившееся число меньше 10 – добавляем 0, так как каждый элемент времени нужно выводить в двузначном формате. И затем с помощью метода toString() приводим получившийся результат (переменную day), к строковому типу данных (это нам понадобится для более красивого отображения времени, но об этом позже). Как видите здесь все просто – немного математики и все.
Далее часы определяем по аналогии с днями, только переменную делим уже на количество миллисекунд в одном часе. Но теперь необходимо отбросить дни, так как мы сейчас получили общее количество часов до указанной даты отсчета. Для этого мы с помощью операции – остаток от деления отбрасываем дни. Для обозначения этой операции используется символ — % и возвращает эта операция — остаток от деления левого операнда на правый операнд. То есть мы как бы делим общее число получившихся часов на 24 (количество часов в одном дне) и берем от результата только остаток от деления – так как целая часть от деления – это уже дни, а мы их уже получили.
Затем находим минуты – все по аналогии. Переменную таймер делим на количество миллисекунд в одной минуте и отбрасываем часы (как и в примере выше – берем остаток от деления общего количества минут на 60 – количество минут в одном часе).
И последнее, находим секунды. Для этого все также делим переменную таймер на количество миллисекунд в одной секунде и отбрасываем минуты. Все также берем остаток от деления общего количества секунд на 60 – количество секунд в одной минуте.
Итак, в принципе таймер у нас готов осталось красиво его вывести на экран и периодически вызывать созданную нами функцию. Но перед этим давайте себя проверим и выведем на экран то что у нас получилось. Для этого вставим в функцию код (ниже после расчета секунд):
Затем после кода функции вызовем ее на исполнение:
И теперь, задав любое время для отсчета таймера, переходим в браузер и обновим нашу страничку. Как Вы видите, появилась надпись с временем которое остается до указанной даты отсчета.
4. Выводим таймер на экран.
Но, конечно, сейчас наш таймер не работает, так как он не считает время. Вернее считает, но делает всего один замер времени за один вызов функции. Поэтому давайте это исправим, а заодно красиво выведем наш таймер на экран (код с функцией alert(), можно удалить, либо закомментировать):
Итак, на этом наша функция вызова таймера готова. Выводить время таймера я планирую с небольшой анимацией. То есть, как только будет изменяться какая-то цифра таймера, то будет происходить небольшой скачек этой цифры (цифра будет как бы опускаться вниз, плавно появляясь), делая наш таймер более красивым и современным. Но для этого нужно проверять, какие идут впереди цифры времени, что бы знать изменится ли число или нет.
Обратите внимание, в самом конце кода функции, я вызываю функцию setTimeout(), с помощью которой, вызывается наша создаваемая функция через одну секунду (она вызывается ровно один раз). То есть мы один раз функцию вызываем сами, а последующие разы, она вызывает себя сама с интервалом в одну секунду.
Теперь так как переменные day, hour, min и sec у нас имеют строковый тип данных, то мы можем обращаться к любому символу этих переменных используя индексы — их номера в строке. К примеру если в переменной day у нас записана строка 10, то 1 — это символ с индексом 0, а 0 — с индексом 1, значит для вывода первого символа этой переменной можно написать вот так day[0].
Далее (пояснения веду с конца кода функции) выводим на экран единицы секунд (как я и говорил секунды выводятся в двузначном формате — первое число это десятки, второе — единицы) . Для вывода используем функцию animation() (код которой я приведу ниже), которая используется для анимированного вывода элементов таймера. То есть единицы секунд у нас выводятся всегда с анимацией, так как они изменяются каждую секунду. Далее, десятки секунд нужно выводить с анимацией только тогда, когда единицы секунд равны 9 (sec[1] == 9), так как в этом случае десятки изменят свое значение. В противном случае десятки должны быть неподвижны. Значит если sec[1] == 9, то мы выводим десятки секунд при помощи функции animation($(«#sec0″),sec[0]), если же нет, то мы выводим десятки попросту используя метод html() ($(«#sec0″).html(sec[0]);).
Далее единицы минут, нужно выводить с анимацией только тогда, когда десятки секунд равны 5 (sec[0] == 5) и единицы секунд равны 9 (sec[1] == 9). Затем десятки минут также необходимо выводить с анимацией лишь тогда, когда единицы минут равны 9 (min[1] == 9 ) и десятки секунд равны 5 (sec[0] == 5) и единицы секунд равны 9 (sec[1] == 9).
Далее для часов и дней все по аналогии, просто добавляем проверку предыдущего числа, которое должно вывестись на экране. Конечно, немного запутано по началу, для восприятия, но здесь ничего сложного нет просто обычные манипуляции с числами.
Теперь приведу код функции, которая выводит на экран элементы таймера при помощи анимации:
Первым делом обратите внимание на параметры, которые необходимо передавать этой функции. Первый параметр — это обычная выборка jQuery, к примеру $(«#min0″). Второй параметр — это данные, которые мы вставляем в выбранный блок (а выборка у нас передается в переменную vibor). Затем мы пишем выборку (сохраненную в переменной vibor), далее вызываем метод html() – которому передаем параметром переменную param (а в ней сохранены данные для вставки). Затем вызываем метод css() с помощью которого задаем стили для нашей выборки. То есть мы немного поднимаем выбранный блок вверх, при помощи правила marginTop (обратите внимание как в этом методе записываются правила состоящие из двух слов), со значением в -20px и задаем полную прозрачность выбранного блока, то есть как бы скрываем данный блок. Далее вызываем метод animate(), который дает возможность нам, создавать пользовательскую анимацию опираясь на правила css, которые мы ему передаем. К примеру, если у блока ширина 100px и методу animate() мы передаем правило для ширины равное 300px. То на экране мы увидим плавное увеличение ширины блока до 300px.
Методу animate() мы передаем правила css, которые будут опускать выборку на свое обычное местоположение, а также убирать прозрачность в блоке с выборкой.
Итак, если обновить браузер, то на экране будет выведен вот такой вот таймер обратного отсчета.
Как мне кажется, таймер получился довольно неплохой и красивый.
Итак, на этом работа над таймером у нас закончена. Таймер получился полностью работоспособным и современным.
Если возникнут вопросы — пишите, постараемся на них ответить. Всего доброго! Удачного Вам кодирования и до новых встреч!!!
webformyself.com
Зачем в рассылке таймер обратного отсчета
Создает чувство срочности
Таймер, секунды которого стремительно тикают в обратном направлении, создает чувство срочности и ощущение дефицита времени.
Призывает к немедленному действию
Подписчик понимает, что время действия предложения ограничено. Это стимулирует действовать немедля, а не отложить на потом и забыть.
Привлекает внимание
Цифры на счетчике меняются в непрерывном режиме — динамическое действие на фоне статичного контента письма цепляет глаз.
Чтобы не осталось сомнений: Selligent и Lynda провели исследование. Выяснилось, что рассылка с таймером приносит 10-процентное увеличение конверсий и 33-процентний рост переходов по сравнению с обычным письмом.
Начинаем тестировать.
Мы создадим таймер, который будет считать оставшееся время до Нового года. Так что задаем одну и ту же дату окончания события — 31 декабря.
1. MotionMail
Сервис предназначен исключительно для создания таймеров. Регистрация занимает считанные секунды — кроме имени, фамилии и адреса электронной почты больше ничего не требуется.
В сервисе доступно 4 тарифа:
- Free — полностью бесплатный;
- Bootstrap подходит для маленьких компаний и стоит $10 в месяц;
- Startup с платой $60 в месяц для начинающих предпринимателей,
- Enterprise за $200 в месяц — вариант для крупного бизнеса.
В бесплатном тарифе предусмотрено 20 000 кредитов в месяц. Один кредит — один просмотр созданного счетчика. Как только пользователь открывает письмо с таймером — минус кредит. Если один и тот же пользователь открывает письмо, скажем, 5 раз, — минус 5 кредитов со счета. Как оказалось, превью письма с таймером в сервисе рассылок, тоже считается просмотром.
Если у вас остались неиспользованные кредиты за месяц, в тарифе Free и Bootstrap они сгорят, а в тарифах Startup и Enterprise перейдут на следующий месяц. Если кредиты закончились, предусмотрена дополнительная плата за просмотры свыше установленного максимума. Но эта функция доступна только на платных тарифах. Цена за один просмотр варьируется от $0.0001 до $0.000085.
В бесплатной версии под таймером отображается водяной знак компании, но фон и надписи можно подобрать так, что копирайт станет еле заметным. В платном тарифе водяной знак отключается.
Пользователь бесплатного тарифа может установить только один язык таймера для всего списка рассылки. В платных тарифах язык меняется автоматически в зависимости от языка браузера получателя — вы выбираете язык по умолчанию, а остальное делает система.
Интерфейс удобный и понятный, но доступен только на английском языке. Есть 4 разных дизайна. Для таймера можно задать фон, изменить цвет и размер шрифта. Код можно редактировать. Доступен предварительный просмотр таймера, который вы создали.
Чтобы сгенерировать таймер в этом сервисе, глубоких технических знаний не требуется. Достаточно прописать параметры и вставить полученный код в шаблон письма. Респонсивности можно добиться с помощью атрибута со стилевыми свойствами: style=»width:100%; height:auto;».
Понравившийся вариант счетчика отображается в плохом качестве: отчетливо видны все пиксели вне зависимости от размера. Особенно это заметно, когда вставляешь код в шаблон письма. Попытка узнать, связано ли это с бесплатным тарифом, или неправильными настройками, не принесла результатов. В FAQ ответа на этот вопрос нет, а блог компания не ведет.
Мы попробовали другой вариант оформления и получили таймер в нормальном качестве.
2. Sendtric
Сервис специализируется на таймерах обратного отсчета. Плюс в том, что он абсолютно бесплатный. Единственный доступный язык интерфейса — английский, но это не сказывается на простоте в использовании. Все настройки интуитивные и понятные.
Регистрироваться не нужно. Достаточно ввести email, выбрать часовой пояс, затем дату и время события, до которого таймер будет отсчитывать время. Счетчик устанавливается не более чем на 30 дней. Он работает 60-90 секунд, а затем возвращается к началу цикла — времени, которое отображалось при открытии письма. Если подписчик откроет email повторно, таймер снова будет отображать точное время до заданного события.
Вариантов дизайна нет, но есть возможность выбрать цвет фона, текста и самого таймера. Нажимаем кнопку «Generate» и получаем код.
Редактировать код на сайте нельзя, поэтому копируем его в буфер обмена и вставляем в нужный блок шаблона письма. Не забываем про атрибут style с соответствующими значениями width и height, чтобы размер таймера менялся автоматически. Что примечательно — водяной знак под счетчиком отсутствует.
Бета-версия Pro находится в разработке. На сайте сервиса указано, что она останется полностью бесплатной. Неограниченное количество просмотров и созданных таймеров сохранится. В Pro версии будет расширенный редактор с возможностью подогнать размер, изменить фон или загрузить свой собственный. Появится превью и архив созданных таймеров, которые можно будет изменять.
3. Niftyimages
Сервис предназначен для создания персонализированных изображений, таймеров обратного отсчета и ленты социальных сетей в реальном времени для email кампаний. Есть FAQ для каждой категории услуг, компания ведет блог.
В сервисе доступны следующие тарифы:
- Starter для начинающих. За $20 в месяц вы получаете 50 000 просмотров. Подписка на год стоит $192.
- Pro для продвинутых пользователей. 250 000 просмотров за $80 в месяц или $768 за подписку на год.
- Enterprise для больших компаний. 1 миллион просмотров за $250 в месяц, но подписка на год не предусмотрена.
Есть бесплатная пробная версия, в которой доступно 10 тысяч просмотров — ее мы и будем тестировать.
Первое, что стоит отметить, сервис отнимает просмотры по факту — если получатель увидел таймер, а не просто открыл email. Интерфейс англоязычный, русского адаптированного перевода нет. В пробной версии доступно 6 разных дизайнов.
Настройки удобные. В панели слева сначала выбираем базовые параметры: устанавливаем дату события и время, задаем часовой пояс. После этого настраиваем шрифты. Вариантов много. Указываем нужный размер, цвет шрифта и фона. Цвет надписей и цифр тоже меняется. В конце выбираем язык таймера и при необходимости загружаем собственный фон.
В конструкторе можно посмотреть, как будет выглядеть таймер. На нем нет водяного знака компании.
Мы обратили внимание, что дни, минуты и секунды указаны в родительном падеже, а часы — в именительном. Поэтому, чтобы избежать разнобоя в склонении, надписи под цифрам лучше убрать.
Теги, значения и атрибуты кода на сайте редактировать нельзя. Поэтому копируем его, вписываем нужные значения и вставляем конечный вариант кода в шаблон письма.
4. proTimer
Русскоязычный сервис. Чтобы попробовать демо версию, нужно указать имя и электронную почту. Через несколько секунд на почту приходит ссылка на публичный аккаунт в сервисе proTimer, где вы можете самостоятельно протестировать функционал платформы и разобраться, как добавить таймер в рассылку. В догонку приходит письмо от разработчика о том, что счетчик, созданный в демо версии, удаляется спустя 2 часа.
Сервис предоставляет два тарифных плана:
- Эконом: за 48 рублей пользователь получает 1 таймер в месяц. Сколько таймеров используете — столько раз по 48 рублей и заплатите. В тарифе доступно 15 вариантов дизайна.
- Безлимитный: за 199 рублей в месяц. Единственное отличие от эконом-тарифа — неограниченное количество таймеров. За указанную сумму вы можете использовать хоть 2 таймера, хоть 20.
Дизайн интерфейса выглядит просто, язык не меняется. Перед началом работы проводится короткий инструктаж-демонстрация, но разобраться в главном меню все равно сложно.
Во вкладке «Как считать» указываем дату завершения акции и выбираем время.
Переходим к следующей вкладке — «Как отображать». Выбираем подходящий дизайн, устанавливаем размер и цвет фона. Изменение шрифта не предусмотрено. Ненужные цифровые части таймера можно отключить вместе с надписями.
Предварительный просмотр результата отображается в каждой вкладке. В блоке «Как отображать» достаточно много настроек. Превью не помещается в окне и таймер пропадает из поля зрения. Чтобы увидеть, как меняется счетчик, приходится каждый раз прокруткой спускаться вниз страницы. Это не очень удобно.
В последней вкладке, «Настройки для писем», нужно выбрать, что будет отображаться, когда срок действия акции закончится. Есть 5 предложенных сервисом вариантов и возможность вставить URL своей картинки в формате PNG.
На последнем этапе можно выбрать, какого цвета будет фон под таймером. Палитры на цветовом круге нет, так что пришлось просить у Google таблицу названия цветов, чтобы выбрать шестнадцатеричный код подходящего цвета. Еще один минус в удобстве использования.
Когда все параметры указаны, нажимаем кнопку «Вставить таймер в письмо». Платформа начинает генерировать таймер. В нашем случае, процесс занял по меньшей мере 10 минут. Это долго по сравнению с другими сервисами, которые выдают результат моментально. Код, который мы получили, оказался очень громоздким. Стоит отметить, что он вставляется в исходный код письма, а не в визуальный редактор.
Цифры по итогу сбились — вместо положенных 27 дней до 31 декабря отображается 1 день.
sendpulse.com