Бывает, что вам для чего-то нужен таймер обратного отсчета , в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на 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 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 :

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 = ("0" + t.seconds).slice(-2);

Заключение

Мы рассмотрели, как сделать простой таймер обратного отсчета на javascript . Все, что вам осталось, это добавить стили. Спасибо за внимание!

1. Авторизуйтесь на сервисе. Если у вас нет учетной записи, .
2. Нажмите кнопку . Откроется страница настройки счетчика.

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

• Основное
• Код счетчика
• Вебвизор
• Цели
• Фильтры и операции

Установка счетчика

Установка счетчика на сайт с CMS

1. Скопированный код добавьте в файл, который отвечает за генерацию заголовка (header) Если разместить код счетчика не на все страницы сайта, для Метрики посетитель будет то появляться на сайте, то пропадать - в статистику попадут искаженные данные."}}">всех страниц сайта .

Для наиболее популярных CMS разработаны , которые позволяют установить код счетчика автоматически. Для этого, как правило, достаточно установить плагин и пройти авторизацию.

Если на одном сайте используются несколько CMS (например, одна отвечает за содержимое сайта, а другая - за форум), код счетчика необходимо разместить в каждой из них.

Установка счетчика на сайт без CMS

1. В интерфейсе Яндекс.Метрики в разделе Настройка (на вкладке Код счетчика ) нажмите кнопку Скопировать .
2. Если сайт небольшой и все его страницы - отдельные файлы, написанные вручную, добавьте сохраненный код в HTML-код Если разместить код счетчика не на все страницы сайта, для Метрики посетитель будет то появляться на сайте, то пропадать - в статистику попадут искаженные данные."}}">всех страниц сайта . Рекомендуем разместить его как можно ближе к началу страницы - от этого зависит полнота и корректность подсчета данных.

* CMS-система - программа для управления содержимым сайта (Content Management System). С ее помощью можно загружать на сайт и удалять с него тексты, изображения или видео, не имея навыков программирования.

После установки счетчик будет доступен на странице Мои счетчики . Данные начинают собираться сразу же, а через несколько минут после установки кода на странице Мои счетчики , появится

Эта статья посвящена бесплатным плагинам для таймеров обратного отсчета на сайт. На самом деле плагинов много – и платных и бесплатных. Мне эти показались более интересными. И, кроме того, пройдя по ссылкам, Вы попадете на страницу, где можно скачать плагин абсолютно бесплатно. В придачу на этих страницах находятся инструкции по установке и настройке.

Конечно, таймер обратного отсчета можно установить и без плагинов, с помощью скрипта. В следующей статье планирую рассказать как это сделать.

А пока давайте про плагины.

1. FlipClock.js

FlipClock.js плагин jQuery с CSS3 анимацией, таймер и часы с разными эффектами.

2. flipCountDown

FlipCountDown является плагином три в одном – часы / таймер / обратный отсчет в стиле ретро.

3. TimeCircles

TimeCircles – это плагин JQuery, который предоставляет собой удобный способ либо обратного отсчета в направлении определенного времени, или для подсчета истечения некоторого времени. TimeCircles является простым, но динамичный инструментом, который дает возможность легко сделать привлекательный отсчет или таймер.

4. CountdownCube

Это плагин JQuery, который создает таймер обратного отсчета в годы, месяцы, дни, часы и секунды в виде кучу вращающейся 3d кубов.

5. Final Countdown

Final Countdown используется для отсчета в секундах, минутах, часах и днях с индикатором обратного отсчета в стиле кольца.

6. Timeto

TimeTo является простым в использовании и настройке плагин JQuery для создания таймера обратного отсчета или цифровых часов с большим количеством опций и поддержкой обратного вызова.

7. County

County – бесплатный JQuery плагин для отсчета времени с мощной библиотекой JQuery и загружается с различными опциями и настройками. Это позволяет управлять анимацией, цветовыми схемами и многими другими параметрами.

8. jQuery Countdown Timer Plugin

jQuery Countdown Timer Plugin – плагин для отображения отсчета согласно вашей потребности. Вы можете установить дату в будущем для обратного отсчета до этой даты с сегодняшнего дня или установить дату начала и дату окончания для обратного отсчета, или вы можете установить время в часах, минутах и секундах для обратного отсчета времени до нуля.

9. dsCountDown

DsCountDown – простой плагин JQuery для создания таймера обратного отсчета. Плагин имеет возможность обратного отсчета в днях, часах, минутах и секундах, определенных в JavaScript.

10. Beautiful jQuery Countdown Timer Plugin

Плагин с элементами реального таймера обратного отсчета, которые делают его легким для создания на конкретной странице.

11.

TicTic – это плагин JQuery для создания тикеров. Также он может быть использован с фоном или ползунком на фоне.

12. KK Countdown

Плагин KK Countdown подойдет до конкретных дат в будущем.

13.

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

14.

Open Source jQuery Countdown устанавливает срок, чтобы показать обратный отсчет времени до заданного времени. К функциональности отсчета могут быть легко добавлены разделение времени с соответствующими параметрами по умолчанию, хотя вы должны установить целевое время.

15. Countdown.js

В Countdown.js интуитивно правильно идет время согласуясь с настоящим. Чтобы сделать это, Countdown.js использует концепцию “сегодняшней даты в следующем месяце”, а это означает “через месяц”. Как дни идут, плагин производит последовательно, увеличивая или уменьшая, рассчитывает время без противоречивых прыжков. Диапазон точности ограничивается только основой часов системы.

16. jQuery Countdown Script

Сценарий позволяет установить обратный отсчет, упомянув определенное дата и время или смещение. Можно использовать несколько экземпляров на одной странице, есть старт-стоп таймер и многое другое.

На данный момент отсутствует

17. Countdown Widget

Countdown Widget – виджет для вашей веб-страницы, которая отображает часы или или простые числа. Установите его, чтобы использовать внешние изображения. Можно использовать и без изображений.

18. T(-) Countdown

T(-) Countdown – это тоже виджет. В принципе логичный, не очень нагружает блог. Но очень строгий в оформлении.

Все эти плагины бесплатны. Пробуйте и найдете подходящий для вашего блога.

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

http://сайт/wp-content/uploads/2015/12/t-min.png http://сайт/wp-content/uploads/2015/12/t-min-200x64.png 2015-12-13T16:06:15+00:00 Надежда WordPress

Здравствуйте уважаемые читатели блога сайт. Сегодня я хочу более подробно рассказать про создание и настройку счетчика Яндекс Метрики . На страницах своего блога я уже затрагивал тему на счет необходимости , а также рассказал, как установить форму подсчета посетителей на свой проект, но эта статья будет посвящена именно сбору статистики посещений средствами Яндекс.

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

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

Создаем счетчик yandex метрики

Первое, что нам необходимо это добавить яндекс счетчик. Для этого переходим по ссылке http://metrika.yandex.ru/list? и нажимаем кнопку «Добавить счетчик», после чего попадаем на страницу создания, где необходимо ввести основные сведения. На рисунке ниже я привел примерное заполнение всех необходимых полей вымышленной информацией.

После того, как вы введете информацию и примите условия соглашения, необходимо нажать кнопку «Создать». Это действие перенесет вас на новую страницу, где мы в дальнейшем будем настраивать основные функции.

Настройка яндекс счетчика

Страница настроек содержит несколько разделов, про каждый из которых я постараюсь рассказать подробно.

Основное

В основном разделе будет видна информация, включающая в себя номер, имя, домен сайта и часовой пояс.

Вы можете менять информацию, но при любом изменении обязательно нажимайте кнопку «Сохранить»

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

Код счетчика

В следующем разделе вы можете настроить основные функции путем изменения кода яндекс счетчика. Расскажу про основные параметры, не углубляясь в ненужные:

Вебвизор — Позволит вам осуществлять анализ поведения посетителей проекта.

Хеш — Отслеживание хеша в адресной строке браузера.

Хеш — это уникальное имя файла, не зависящее от того, как его назвали.

Асинхронный код — Позволяет устанавливаемому счетчику yandex метрики не влиять на скорость загрузки сайта.

Информер — При установке кода на сайт с базовыми настройками, он будет невидим для всех. Установка галочки напротив этого пункта позволит сделать его видимым и появится функция настройки графического отображения информера (можно увидеть на рисунке ниже).

Вебвизор

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

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

Цели

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

Фильтры

Этот раздел остался для меня загадкой. Я постарался найти информацию в сети интернет, но толком ничего не нашел. Считаю, что фильтровать какие-либо данные не стоит, так как вы не будете видеть полной картины анализа вашего проекта. Видимо поэтому, при настройке счетчика yandex, не стал сильно заморачиваться над изучением этого раздела.

Уведомления

Раздел уведомления позволит получать сообщения от Яндекс.Метрики при возникновении проблем с доступностью ресурса по электронной почте, либо через сообщения на ваш телефон.

Фактически с настройкой счетчика метрики мы с вами разобрались, осталось его установить на свой ресурс и начать получать статистику по посещениям.

Установка счетчика яндекс метрики на сайт

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

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

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

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

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

Смотрите мой видеобзор данных сервисов. В видео я также показываю, как установить таймер на сайт:

Итак, первый сервис, где можно быстренько сделать симпатичный таймер – e-timer.ru .

Здесь перед нами окошко с довольно гибкими настройками; предпросмотр результата и код, который нужно будет скопировать и вставить на свой сайт для отображения таймера.

Собственно, весь процесс сводится к настройкам под себя. В основных настройках указываем, подключена ли на сайте библиотека jquery. Проверить можно, заглянув в исходный код сайта (ctrl+u), далее нажать для поиска ctrl+f.

Если выберем перезапуск, допустим, каждый день – то ежедневно счетчик будет начинать свой отсчет заново.

Также можем поменять надпись на счетчике «До конца акции осталось», увеличить или уменьшить ее, либо убрать совсем, оставив это поле пустым.

В настройках отображения таймера можем редактировать его внешний вид:

Менять шрифт и цвет надписей;
разделители между цифрами;
язык надписей (доступен русский, украинский, английский);
внутренний отступ и цвет фона;
границы и тень.

Тут можно играться по-разному и сразу смотреть на результат.

В настройках отображения цифр можем выбирать:

Наименьшее значение – если выберем «минуты», тогда секунды отображаться уже не будут;
шрифт, размер и цвет цифр;
внутренний отступ – при его увеличении счетчик растягивается в длину.
границы – когда увеличиваем, скругляются углы квадратиков, окружающих цифры.
и тень – если тут поставим 0, то полностью уберем квадратики вокруг цифр.

Когда все настройки сделаны, копируем код таймера и вставляем в нужное место на сайте .

Я покажу на примере простого html-лендинга, который открыла для редактирования в блокноте notepad++. Таймер я хочу поставить прямо под кнопкой оплаты, поэтому нахожу это место в коде, размещаю скрипт, и выравниваю таймер по центру при помощи тегов

. Вот так:

нажмите, чтобы увеличить

А на лендинге мой таймер выглядит так:

Следующий онлайн сервис megatimer.ru . Мне он больше пришелся по душе, хоть там и меньше возможностей по внешней настройке таймера.

Итак, в верхней части видим, как будет отображаться счетчик, а чуть ниже – вкладки с настройками.

«Тип таймера» – здесь настраиваем принцип его работы. Если до определенной даты, то указываем конец отсчета (по локальному времени пользователя или по Москве, к примеру).

Если на промежуток времени, то можем установить таймер на 24 часа для каждого нового посетителя. Тогда выбираем начало отсчета с первого посещения клиентом и указываем длительность – 24 часа. При этом в правом верхнем углу снимаем галочку с «Дни», оставив на таймере только часы, минуты и секунды.

Хотя, если этот же посетитель зайдет на страничку с таймером с другого браузера или почистит кеш, то отсчет для него начнется сначала.

Есть еще цикличный таймер, который может перезапускаться ежедневно с определенной периодичностью.

«Дизайн» – из предложенных вариантов можем выбрать внешний вид нашего таймера. Выбор невелик, но есть несколько универсальных вариантов.

«Настройки» – на этом этапе у нас есть возможность изменить шрифт, размер и цвет цифр, отступ между ними, разделитель, а также шрифт, размер и цвет надписей.

Заключительный шаг – копируем коротенький код и, все так же, размещаем в нужном месте на сайте.

И последний сервис, на котором сегодня хочу остановиться – timegenerator.ru . Позволяет в считанные секунды сгенерировать таймер, так как настроек здесь минимум.

Перед нами 4 варианта таймеров, из которых выбираем наиболее подходящий для себя, нажав по соответствующей кнопке.

Указываем дату окончания отсчета.

Жмем по кнопочке «Создать счетчик», копируем код и вставляем на свой сайт.

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

Спасибо за внимание! Как всегда рада вашим комментариям.

С уважением, Виктория