Скрипты обратного отсчета очень полезны для владельцев веб-сайтов или блогов, кто хочет о чем-то проинформировать своих читателей и посетителей. Будете ли вы внедрять обновление в блоге или ваш блог находится на реконструкции, у вас будет возможность предупредить пользователей, что скоро все встанет на свои места, и даже указать время, когда это произойдет.
Сегодня мы подготовили для вас подборку скриптов с таймерами обратного отсчета. Это, как нам кажется, лучшие примеры реализации подобной функции.
01. Анимированный счетчик на javascript
Простой анимированный счетчик на javascript, который позволит вам легко представить информацию в цифрах, будь то количество зарегистрированных пользователей или общий показатель доходности. Но это далеко не все. Этот счетчик также можно использовать для отображения текста или даты и времени, даже в виде часов. Можно использовать в качестве таймера обратного отсчета для отображения оставшегося времени до выхода продукции или до старта продаж.
Сайт-источник
: http://codecanyon.net/item/javascript-animated-counter/233648
Предпросмотр
: http://codecanyon.net/item/javascript-animated-counter/full_screen_preview/233648
02. Страница «На реконструкции» в стиле параллакс
03. Страница «На реконструкции» с обратным отсчетом
04. Fancy Countdown – jQuery-плагин
05. jsCountdown
06. Целевая страница «Coming Soon»
07. Счетчик для сайта на реконструкции
08. WordPress-плагин: Coming Soon
09. Виджет Broadcast Countdown
10. WordPress-сайт в разработке или не отвечает по техническим причинам
11. 5sec Maintenance Mode
12. Плагин jQuery Countdown
13. jQuery-countdown
Таинственный таймер, следы которого ведут в Антарктиду, отсчитывает последние дни человечества.
Как это ни прискорбно, но человечество всегда жило и живет в ожидании конца света. Спешим успокоить, ждать осталось недолго. Когда коллективный разум создает фантомы, они рано или поздно обретают плоть. Раньше сила воздействия коллективного разума на реальность не была такой мощной. Людей, которые верили в христианство, на заре его существования на земле было всего-то несколько сот человек. А вот тех, которые верили в конец света 2012 года по календарю майя, насчитывалось сотни миллионов. Пронесло… в хорошем смысле этого слова. Но так дальше продолжаться не может, в конце концов, страхи сгенерируются во что-нибудь действительно ужасное. Хуже всего, что в подобную чушь люди начинают верить одновременно во всём мире, благодаря средствам массовой информации и, прежде всего, Интернету. Сенсационное открытие в области науки не вызывает практически никакой реакции со стороны общественности, хотя именно оно способно изменить жизнь всего человечества. К нему-то и должно быть приковано внимание. Таки нет! Но стоит выжившему из ума сторожу увидеть спьяну страшный сон, как «Откровения святого старца» тут же тиражируются и перепосчиваются во всех соцсетях. Еще больше внимания вызывают странные случаи, похожие на таймер в Антарктиде. Напомним предысторию.
В начале 2017 года ведущим мировым ученым и политикам на электронную почту стали приходить письма, содержащие единственное слово «The End».
Собственно ничего необычного во всем этом нет, если бы специальная комиссия, созданная для того чтобы оградить выдающихся людей современности от виртуального хулиганства, не выяснила откуда пришло странное послание. Выяснили, удивились, испугались!
Оказалось, что из Антарктиды, с полярной станции. Послали туда запрос. Ответ пришел настораживающий. Начальник станции заявил, что никто из сотрудников к этой бодяге непричастен, но к компьютеру, с которого осуществлялась угрожающая рассылка, было зафиксировано внешнее подключение. Что опять-таки очень странно, потому что взломать его можно только изнутри.
Короче, сплошные загадки. Но понедельник 15 мая остался в прошлом, мирового катаклизма не случилось, и об инциденте благополучно забыли, а зря. Версия, которую высказал недавно один из ведущих мировых ученых, пожелавший не открывать своего имени, звучит по-настоящему страшно.
Обращение из будущего
Он предположил, что послание было сделано из будущего, в надежде на то, что лучшие умы человечества и влиятельные люди все-таки обратят на него внимание, задумаются и предпримут меры. Для того и было отправлено с загадочного белого континента. Речь идет о Вселенского масштаба.
Что случится в действительности, никто не знает, и 15 мая, скорее всего, дата ошибочная. Но ошибка сделана намеренно. Не стал бы благодетель из будущего предупреждать о неизбежном всего за несколько месяцев. А вот за несколько лет или даже десятков лет… вполне вероятно. Так что день 15 мая остается в силе, но год катастрофы переносится. На сколько? Кто знает? Есть время подумать.
Бывает, что вам для чего-то нужен таймер обратного отсчета , в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на 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);
Разберемся, что здесь происходит.
Повторите эту логику, чтобы сконвертировать миллисекунды в минуты, часы и дни.
Выведите данные таймера, как многоразовый объектКогда часы, минуты и секунды готовы, нам нужно вернуть их как многоразовый объект.
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 .
Единственное, что осталось, запустить часы следующим образом:
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;
...
}
Если вам нужны ведующие нули, вы можете заменить код такого вида:
SecondsSpan.innerHTML = t.seconds;
На такой:
SecondsSpan.innerHTML = ("0" + t.seconds).slice(-2);
ЗаключениеМы рассмотрели, как сделать простой таймер обратного отсчета на javascript . Все, что вам осталось, это добавить стили. Спасибо за внимание!
В этой статье мы рассмотрим несколько вариантов таймеров.1 вариант.
Простой таймер использующий только минуты и секудны
Чтобы таймер появился, необходимо элементу придать идентификатор timer
и добавить условие в тег
Всё, таймер готов.
2 вариант.
Цифрами для таймера будет служить картинка. Также в этом таймере помимо минут и секунд доступны часы и дни. Наш таймер будет отсчитывать время до определенного дня.
Оформляем страницу
Таймер обратного отсчета
Для отображения времени будет использоваться картинка digits2_orange.png
Далее пишем js код
var t=Date.parse(deadline)-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));
$(function(){
$("#counter").countdown({
image: "pic/digits2_orange.png",
startTime: days+":"+hours+":"+minutes+":"+seconds,
timerEnd: function(){
$("#tut").html("Таймер завершил свою работу");
}
});
});
image - наша картинка
startTime - это как раз время оставшееся до 01.09.2017
timerEnd - то, что происходит по завершении работы таймера, в нашем случае в контейнер с идентификатором tut будет вставлена соответствующая надпись
Далее наш таймер
Осталось:
ДнейЧасовМинутСекунд
Оформляем
#layer{
width:600px;
text-align:center;
margin:0 auto;}
#counter{
margin:10pt auto 0 auto;
width:414px;}
Desc{
width:430px;
margin:0px auto;}
#days,#hours,#minutes,#seconds{
float:left;
font:13px Arial,Verdana,sans-serif;
width:50px;
margin-right:63px;
font-weight:bold;
color:#000;}
#seconds{margin-right:0px;}
CntSeparator {
font-size:50px;
margin:6px 7px;
color:#000;}
3 вариант.
На наш взгляд самый удобный. Также как и предыдущий показывает оставшееся количество дней, часов, минут, секунд. Не использует изображение для отображения счетчика.
Для работы нам понадобится библиотека jquery и файл
Оформляем страницу
Таймер обратного отсчета
// здесь нужная дата в формате гггг-мм-дд чч:мм:сс
var deadline="2017-08-20 00:00:00";
Countdown li{display: inline-block;}
/* здесь дни, часы, минуты, секунды */
.countdown li span{
width:100%;
color:#000;
font:18px Verdana;
display:inline-block;}
/* разделители. и: */
.countdown li.seperator {
color:#000;
font:16px Verdana;
vertical-align:top;}
Countdown li div{
margin:0;
color: #a7abb1;
font:8pt Verdana;}
Привет, друзья! В этой статье сделаю обзор трех онлайн сервисов по созданию таймера обратного отсчета, с которыми познакомилась, когда мне понадобилось заменить неработающий таймер на из реселл-комплекта.
Копание в скриптах и кодах – не мой конек, поэтому я решила воспользоваться простым и быстрым решением – специальным сервисом. Визуально настроить на нем свой таймер и далее уже вставить готовый скрипт на место неработающего.
Пока искала, наткнулась на три неплохих онлайн инструмента, и решила о них рассказать. Возможно, они вам тоже пригодятся в работе.
Смотрите мой видеобзор данных сервисов. В видео я также показываю, как установить таймер на сайт:
Итак, первый сервис, где можно быстренько сделать симпатичный таймер – e-timer.ru .
Здесь перед нами окошко с довольно гибкими настройками; предпросмотр результата и код, который нужно будет скопировать и вставить на свой сайт для отображения таймера.
Собственно, весь процесс сводится к настройкам под себя. В основных настройках указываем, подключена ли на сайте библиотека jquery. Проверить можно, заглянув в исходный код сайта (ctrl+u), далее нажать для поиска ctrl+f.
Если выберем перезапуск, допустим, каждый день – то ежедневно счетчик будет начинать свой отсчет заново.
Также можем поменять надпись на счетчике «До конца акции осталось», увеличить или уменьшить ее, либо убрать совсем, оставив это поле пустым.
В настройках отображения таймера можем редактировать его внешний вид:
Менять шрифт и цвет надписей;
разделители между цифрами;
язык надписей (доступен русский, украинский, английский);
внутренний отступ и цвет фона;
границы и тень.
Тут можно играться по-разному и сразу смотреть на результат.
В настройках отображения цифр можем выбирать:
Наименьшее значение – если выберем «минуты», тогда секунды отображаться уже не будут;
шрифт, размер и цвет цифр;
внутренний отступ – при его увеличении счетчик растягивается в длину.
границы – когда увеличиваем, скругляются углы квадратиков, окружающих цифры.
и тень – если тут поставим 0, то полностью уберем квадратики вокруг цифр.
Когда все настройки сделаны, копируем код таймера и вставляем в нужное место на сайте .
Я покажу на примере простого html-лендинга, который открыла для редактирования в блокноте notepad++. Таймер я хочу поставить прямо под кнопкой оплаты, поэтому нахожу это место в коде, размещаю скрипт, и выравниваю таймер по центру при помощи тегов . Вот так:
нажмите, чтобы увеличить
А на лендинге мой таймер выглядит так:
Следующий онлайн сервис megatimer.ru . Мне он больше пришелся по душе, хоть там и меньше возможностей по внешней настройке таймера.
Итак, в верхней части видим, как будет отображаться счетчик, а чуть ниже – вкладки с настройками.
«Тип таймера» – здесь настраиваем принцип его работы. Если до определенной даты, то указываем конец отсчета (по локальному времени пользователя или по Москве, к примеру).
Если на промежуток времени, то можем установить таймер на 24 часа для каждого нового посетителя. Тогда выбираем начало отсчета с первого посещения клиентом и указываем длительность – 24 часа. При этом в правом верхнем углу снимаем галочку с «Дни», оставив на таймере только часы, минуты и секунды.
Хотя, если этот же посетитель зайдет на страничку с таймером с другого браузера или почистит кеш, то отсчет для него начнется сначала.
Есть еще цикличный таймер, который может перезапускаться ежедневно с определенной периодичностью.
«Дизайн» – из предложенных вариантов можем выбрать внешний вид нашего таймера. Выбор невелик, но есть несколько универсальных вариантов.
«Настройки» – на этом этапе у нас есть возможность изменить шрифт, размер и цвет цифр, отступ между ними, разделитель, а также шрифт, размер и цвет надписей.
Заключительный шаг – копируем коротенький код и, все так же, размещаем в нужном месте на сайте.
И последний сервис, на котором сегодня хочу остановиться – timegenerator.ru . Позволяет в считанные секунды сгенерировать таймер, так как настроек здесь минимум.
Перед нами 4 варианта таймеров, из которых выбираем наиболее подходящий для себя, нажав по соответствующей кнопке.
Все просто, друзья. Теперь вы знаете, где быстро и легко создать счетчик обратного отсчета для сайта.
Спасибо за внимание! Как всегда рада вашим комментариям.
С уважением, Виктория
.jpg)
