Обратный отсчет виджет. Бесплатные онлайн-генераторы таймера обратного отсчета

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

Речь пойдет о нескольких вариантах, в одном случае – это будет скрипт счетчика обратного отсчета, который будет зациклен на каждые 24 часа. То есть, вы сможете делать акцию. Например: “до конца дня — ” и таймер будет показывать, сколько времени осталось до конца дня. По истечению суток, таймер перезапустится и снова начнет отсчет

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

По-разному можно использовать, например, если акция одноразовая и рассчитана на большой промежуток времени, то онлайн подключение более выгодно, так как необходимо добавить всего одну строчку кода в нужное место. В общем в зависимости от цели, выбирайте подходящий вариант именно для вас. Приступим…

Счётчик обратного отсчёта времени с перезапуском

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

Внешний вид таймеров такой:

Скачивайте исходники и в архиве вы увидите 4 папки с названиями vid1, vid2, vid3, vid4 – в них разные типы оформления таймеров. Вы можете посмотреть все и выбрать понравившийся. Способ подключения у всех одинаковый.

Я буду показывать на 4, так как он, как мне кажется, наиболее универсален. Открываем vid4 и пред нами стандартный набор папок для большинства исходников в сети. (индексный файл, папка с таблицами стилей, папка с картинками, и папка со скриптом). Я немного изменил структуру файлов — для того, чтобы новичкам было проще подключать счетчик. То есть я вынес скрипт таймера в отдельный файл, а раньше он был в индексном.

Как подключить скрипт счетчика обратного отсчета на свою landing page?

Открываем index.html– любым редактором (я пользуюсь sublime3) и видим следующий код.

Отсюда нужно скопировать в свой проект подключение таблицы стилей и скрипта (7 и 8 строка).

А также, в месте, на котором вы хотели бы разместить таймер, необходимо прописать тег div с классом “countbox” – 13 строка. В коде специально размещено несколько подключений таймеров, чтобы дать понять, что их можно использовать несколько раз на странице. У многих скриптов с этим проблемы, и второй раз они не хотят выводиться на экране.

Теперь необходимо просто скопировать папки img, css и js, а также их содержимое в свой проект — и все! Счетчик обратного отсчета будет работать! Как видите, это занимает максимум 5 минут, и такой важный элемент будет присутствовать у вас на сайте. Если возникнут вопросы — пишите в комментариях, я обязательно помогу подключить счетчик!

Счетчик обратного отсчета онлайн

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

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

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

1. Auto Shutdown – таймер выключения компьютера Windows 7, с помощью которого можно перезагружать ПК, отправлять его режим сна, выставить таймер отсчета или конкретное время для определенного события.
2. PC Autos – простой гаджет для отключения, смены пользователя или режима компьютера.
3. RC Shutdown timer – компактная программа таймер с набором базовых функций. Похожим образом работает гаджет Auto System Shutdown.

Есть приложения, не нуждающиеся в установке. К таким принадлежит PowerOff. Любую программу для выключения ПК на базе виндовс 7 можно скачать бесплатно.

Завершить работу компьютера через определенное время с помощью проигрывателя (AIMP, WinAmp), менеджеры закачки torrent и некоторые онлайн-ресурсы.

Выключение без утилит
Таймер компьютера Windows 8 и Виндовс 7 задается и через командную строку. В поле поиска вводится: «shutdown -s -f -t 30», причем расположение дефисов и пробелов должно быть именно таким. Цифра в конце команды означает время в секундах, по истечению которого ПК завершит работу. То есть для 1 часа нужно прописывать 3600, для 2 часов – 7200 и т.д. Остается кликнуть «ОК» и система сообщит об отключении через указанный промежуток.

В случае необходимости отмены выключения в поле «Выполнить» вводится код «shoutdown -a». При этом в трее появится соответствующее уведомление.

Планировщик вместо таймера windows 8 и 7
Таймер выключения компьютера windows 7/8 можно заменить стандартным планировщиком заданий. Нужно зайти в раздел «Действия» – «Создать простую задачу», заполнить графу «Имя», кликнуть «Далее». В следующем окне устанавливается периодичность, после того в окошке «Программа или сценарий» вводится команда «shoutdown», а поле аргументы – «-s -f».

Для отмены нужно зайти в библиотеку планировщика и удалить задание.

Вконтакте

Помните таймеры «до Нового Года осталось _ дней _ часов _ минут»? Сегодня таймер обратного отсчета транформировался в отличный маркетинговый инструмент — счетчики стоят на целевых страницах интернет-магазинов, на продающих страницах или лендинг-пейдж. «До окончания акции осталось — 5 дней, 15 часов, 40 минут» или «До начала распродажи осталось 7 часов, 15 минут, 35 секунд». Безусловно, таймеры «подогревают» интерес посетителя, побуждают его к совершению целевого действия на сайте, ограничивая время и создавая эффект срочности или дефицита товара.

Если ваши акции разовые или нет технической возможности установки собственных скриптов — существуют бесплатные онлайн-генераторы, которые в два-три клика подготовят работоспособные таймеры обратного отсчета.

E-timer

Различные варианты настройки и оформления. Объем кода — маленький. Работа скрипта на стороне сервиса.

Три варианта таймера. Без настроек оформления (только через стили CSS). Объем кода — большой (скрипт + стили + код HTML). Работа скрипта на стороне пользователя.

Генератор флеш-таймера

Без поддержки jQuery — таймер сделан на flash . Несколько вариантов оформления. Объем кода — средний. Работа счетчика на стороне сервиса.

jQuery генератор даты обратного отсчёта

Без оформления. Объем кода — большой. Работа скрипта на стороне пользователя.

Пример работы:

До 100-летия осталось.

Программа понравится тем, кто любит наслаждаться временем ожидания. Основная функция приложения TimeLeft это отсчет времени. Среди инструментов утилиты пользователь найдет таймер обратного отсчета, часы, секундомер, напоминатель и создание виртуальных стикеров, позволяющих создавать заметки на рабочем столе. Применение возможностей в комплексе позволяет создать напоминание с таймером, разместить его в любом удобном месте на рабочем столе, запланировать при наступлении события запуск внешнего приложения, установить таймер выключения компьютера, осуществить переход по ссылке или запустить выполнение скрипта. Установите таймер на рабочий стол и программа оживит течение времени ожидаемого момента и. Когда подойдет время торжественного события, когда таймер досчитает до ноля и сработает, TimeLeft уведомит и обратит на это внимание пользователя выводом на экран сообщения, сопровождаемое звуковой сигнализацией.

Таймер отсчета времени

TimeLeft легко применим для любых повседневных задач дома и на работе. Утилита имеет большое количество настроек и дополнительных опций. Среди них такие как: настройки автозагрузки, прозрачности, плавающих окон и окон сообщения, интеграция кнопки быстрого добавления в браузер, поведение трей-иконки TimeLeft, назначение горячих клавиш, расписание рабочих дней, праздников и другие. Для красивого и стильного отображения отсчета времени в программе имеется большой выбор тем оформления для таймера, скины позволяют настроить внешний вид TimeLeft на свой вкус. К таймеру или секундомеру можно применить визуальный эффект, задать стиль, применяемый для смены цифр: вертикальный и горизонтальный слайдер, плавное затухание одной и проявление другой цифры, имитация механического счетчика и другие.

Скриншоты программы TimeLeft

Бесплатная версия TimeLeft и TimeLeft Deluxe

Бесплатная версия имеет ограничения: в бесплатной программе можно создавать не более одного инструмента, то есть одновременно можно создать напоминатель, таймер, часы, стикер и секундомер, но каждый в единственном экземпляре. Платная версия TimeLeft Deluxe позволяет подключить для отслеживания интернет-аукцион, выполнить экспорт таймера в java скрипт, который можно разместить на веб странице, синхронизировать точное время через интернет и снять ограничения на количество одновременно используемых инструментов программы.

Официальный сайт: http://www.nestersoft.com/timeleft/
Операционные системы: Windows All
Поддерживаемые языки: Мультиязычная платформа, включая русский
Версия: 3.62
Лицензия: freeware (бесплатная )

Размер файла 2,36 Мб

Бывает, что вам для чего-то нужен таймер обратного отсчета , в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на javascript в 18 строк кода .

План

Высчитайте оставшееся время

Установите правильную дату окончания

Во-первых, вам нужно установить правильную дату окончания. Это будет строка в любом из форматов, которые понимает Date.parse() метод. К примеру:

Var deadline = "2015-12-31";

Короткий формат

Var deadline = "31/12/2015";

Или длинный формат

Var deadline = "December 31 2015";

Каждый из этих форматов позволяет вам установить точное время(в часах, минутах, секундах) и временную зону. Например:

Var deadline = "December 31 2015 23:59:59 GMT+02:00";

Высчитайте оставшееся время

Function getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t/1000) % 60);
var minutes = Math.floor((t/1000/60) % 60);
var hours = Math.floor((t/(1000*60*60)) % 24);
var days = Math.floor(t/(1000*60*60*24));
return {
"total": t,
"days": days,
"hours": hours,
"minutes": minutes,
"seconds": seconds
};
}

Для начала мы создаем переменную t , чтобы хранить оставшееся время. Date.parse() метод встроен в javascript и позволяет сконвертировать строку со временем в значение в миллисекундах. Это позволит нам вычитать одно время от другого и получать разницу между ними.

Var t = Date.parse(endtime) - Date.parse(new Date());

Приведите дату к удобному формату

Теперь мы хотим перевести миллисекунды в дни, часы, минуты и секунды. Давайте использовать секунды как пример:

Var seconds = Math.floor((t/1000) % 60);

Разберемся, что здесь происходит.

Делим миллисекунды на 1000, чтобы перевести их в секунды
Делим общее число секунд на 60 и сохраняем остаток - вам не нужны все секунды, только те, что остались после того, как минуты были подсчитаны
Округлите вниз до ближайшего целого значения, потому что вам нужны полные секунды, а не их фракции

Повторите эту логику, чтобы сконвертировать миллисекунды в минуты, часы и дни.

Выведите данные таймера, как многоразовый объект

Когда часы, минуты и секунды готовы, нам нужно вернуть их как многоразовый объект.

Return {
"total": t,
"days": days,
"hours": hours,
"minutes": minutes,
"seconds": seconds
};

Этот объект позволяет вам вызывать вашу функцию и получать любое из вычисленных значений. Вот пример, как вы можете получить оставшиеся минуты:

GetTimeRemaining(deadline).minutes

Удобно, правда?

Отобразите часы на странице и остановите их, когда они достигнут нуля

Сейчас у нас есть функция, которая возвращает нам оставшиеся дни, часы, минуты и секунды. Мы можем строить наш таймер. Во-первых, создайте следующую html структуру для часов:

Затем напишите функцию, которая будет отображать данные внутри нашего div"а :

Function initializeClock(id, endtime){
var clock = document.getElementById(id);
var timeinterval = setInterval(function(){

" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;

}
},1000);
}

Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM .

Высчитывать оставшееся время
Выводить оставшееся время в наш div
Если оставшееся время = 0, останавливать часы

Единственное, что осталось, запустить часы следующим образом:

InitializeClock("clockdiv", deadline);

Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк javascript кода .

Подготовьте ваши часы для отображения

До стилизации нам будет нужно немного усовершенствовать некоторые вещи.

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

Убираем начальную задержку

В часах мы используем setInterval , чтобы обновлять отображение каждую секунду. Чаще всего это нормально, кроме начала, где присутствует 1с задержка. Чтобы это исправить, нам нужно обновлять часы один раз до того, как setInterval запускается.

Чтобы это сделать, давайте переместим анонимную функцию, которую мы передаем в setInterval (ту, которая обновляет часы каждую секунду) в собственную отдельную функцию, которую назовем updateClock . Вызовите эту функцию однажды вне setInterval и затем вызовите ее снова внутри setInterval . Таким образом, часы будут показываться без задержки.

В вашем javascript замените это:

Var timeinterval = setInterval(function(){ ... },1000);

Function updateClock(){
var t = getTimeRemaining(endtime);
clock.innerHTML = "days: " + t.days + "
" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;
if(t.total clearInterval(timeinterval);
}
}

UpdateClock(); // запустите функцию один раз, чтобы избежать задержки
var timeinterval = setInterval(updateClock,1000);

Делаем скрипт более эффективным

Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.

Вот html :

Days:

Hours:

Minutes:

Seconds:

Var daysSpan = clock.querySelector(".days");
var hoursSpan = clock.querySelector(".hours");
var minutesSpan = clock.querySelector(".minutes");
var secondsSpan = clock.querySelector(".seconds");

Function updateClock(){
var t = getTimeRemaining(endtime);

DaysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;

...
}