Здравствуйте, дорогие читатели. Разгребая неотсортированные файлы на компьютере, обнаружил очень красивый таймер обратного отсчета на jQuery. Даже не помню где я его взял, а уж тем более когда. Но штука очень красивая. Таймер обратного отсчета используются в основном на продающих страницах, для стимулирования потенциальных покупателей, делая ограничение по времени. Подобные таймеры можно использовать и на страницах-заглушках. когда сайт закрыт на обслуживание, можно вывести этот таймер, чтобы пользователь знал, через какое количество времени сайт заработает.
Как уже писал выше, таймер обратного отсчета работает на jQuery. Это означает, что к сайту необходимо подключить специальный скрипт. Скачайте таймер, распакуйте и посмотрите, какие файлы находятся в папке. в папке js имеются 2 файла, которые нужно подключить к сайту примерно таким образом. Ваш путь к файлам может быть другим.
В таймере используются CSS спрайты. Учитывайте все пути файлов, возможно их придется изменить для полноценной работы этого скрипта. Так же есть 2 файла стилей, которые в итоге можно объединить в один или же скопировать из них необходимые стили для таймера и вставить в основной файл таблицы стилей. Для того, чтобы вставить таймер обратного отсчета на страницу в то место, где вы хотите его видеть,нужно вставить этот блок и отредактировать сам таймер на то время, которое вам нужно.
Теперь, чтобы таймер обратного отсчета не сбрасывался на начало при перезагрузке страницы, нужно вставить в раздел head на странице следующий JavaScript код.
В примере выводится сколько времени осталось до нового года. В дополнении к скрипту таймера обратного отсчета можно использовать красивое модальное окно. Вот, собственно и все. Если что-то непонятно, пишите в комментариях, будем разбираться вместе. Качайте таймер обратного отсчета. Буду вам признателен, если вы поделитесь записью в социальных сетях. Спасибо.
Здравствуйте, Александр! Отличный урок! У меня получилось разместить таймер на своем сайте, но случилось вот что. Теперь весь сайт(картинки, видео и сам таймер) выравнены по левому краю. В чем проблема? Помогите, пожалуйста! могу скинуть скрины
Не могу поменять дату на нужную , всегда стоит 216 дней откуда она берется и как мне поставить нужную мне дату.
области
10 /* Устанавливаем дни*/
20 /* Часы */
15 /* Минуты */
18 /* Секунды */
при их редактировании не меняю ничего
или хотябы что бы счётчик обновлялся вместе со страницей?
т.е человек зашёл а ему каждый раз новый отсчёт…
я в программировании не бум бум, и синтаксиса не знаю…
Как я понял берётся текущая дата и дата установленная вручную…может как то можно написать, что бы конечная дата была равна «текущая + 7 часов например»
у пользователя всегда будет меняться текущая дата…и значит отсчёт будет продливаться
В статье написано, что нужно делать, чтобы таймер не обновлялся каждый раз после перезагрузки страницы. Вы можете этого не делать и будет новый отсчет при каждой презагрузке. как сделать цикл, я пока не знаю.
Убрал код из тела страницы. теперь счётчик сбрасывается при обновлении. Но возник вопрос, как настроить время счётчика? Поставить например 5 часов, 43 минуты, 13 секунд
js/main.js в конце строчка
cf_draw(parseInt($(‘span’, this).text(), 10), parseInt($(‘span’, this).text(), 7), canvas, 10);
вот меняю то значение где сейчас 7..на счётчики все цифры становятся семёрками (7 часов, 7 минут и т.п) а нужно например 5 часов, 43 минуты, 13 секунд
В langing page необходимо установить два таких одинаковых счетчика. Возникла проблема — счетчики имеют разные показатели, и у одного из них секунды не анимируются. в чем может быть проблема?
Установил тамер, но пришлось попотеть.
Там такая история, если папка с картинками находится не в каталоге с index.php то таймер не считает, что-бы он работал, необходимо в одной из последних строк строке main.js указать правильный путь к картинке
У меня получилось так
image.attr(‘src’, ‘/themes/uggi/css/i/sprites.png’);
var currentyear=new Date().getFullYear();
var thischristmasyear=(new Date().getMonth()==0 && new Date().getDate()==1)? currentyear : currentyear + 0 ;
var christmas="february 10, "+thischristmasyear+" 0:0:00";
var currentTime=new Date();
var targetdate=new Date(christmas);
var timediff=(targetdate-currentTime)/1000;
var oneMinute=60;
var oneHour=60*60;
var oneDay=60*60*24;
var dayfield=Math.floor(timediff/oneDay);
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));
$(function(){
$('.c-block:eq(0) .bl-inner span').text(dayfield);
$('.c-block:eq(1) .bl-inner span').text(hourfield);
$('.c-block:eq(2) .bl-inner span').text(minutefield);
$('.c-block:eq(3) .bl-inner span').text(secondfield);
});
Вот код для того чтоб счетчик был цыкличным и не скидывался.
Там, где написано: var christmas=»february 10, Меняете на месяц и число которое вам нужно и счетчик будет до этого числа отсчитывать.
Сейчас попробовал на чистом index.php — работает.
Но на сайте моем не в какую не хочет, и в шапку засовывал, и на главную, и подвал в IE не работает! Скорей всего верстка у меня сайта кривая
Сергей, а проверяете на локальном хосте или в инет залили а потом проверили? у меня на локальном верстка вообще в ie едет, а на нормальном хосте все корректно отображается, и счетчик этот уже на 5 лендов воткнул — все в ie работает
У меня верстка кривовата, может блок один съезжает, из-за этого span canvas на таймере съезжает, но он не отображается нигде. если добавляю span ещё, то появляется отсчет в одном блоке, но от этого считает не правильно
можете глянуть: vidsrtoy21(точка)ru
у меня что и на локалхост, что и на хостинге
У меня получилось воткнуть 2 счетчика, для этого необходимо на втором счетчике в html-коде изменить классы, добавить эти новые классы для css-стилей, скопировать js-файл и изменить в нем классы на новые, не совсем удобно, но работает, вот пример сайта с двумя такими счетчиками spor-dtp.ru
На одну страницу можно поставить 2 счетчика! Я поставил и сделал чтоб они не скидывались после обновления страницы. Не чего там страшного нет и сложного тоже+ Толянова страница очень помогла)
Ребята нужна помощь! Год закончился и счетчик начал от счет заново! Т.е. он показывает 363 дня! Я не могу это убрать. Мне нужно чтоб он отсчитывал столько дней сколько мне нужно, например у меня акция 20-25 дней, а я не могу поставить 20 или 25 дней! Он просто отсчитывает дни до следующего года. Как это убрать?
Ребята нужна помощь! Год закончился и счетчик начал от счет заново! Т.е. он показывает 363 дня! Я не могу это убрать. Мне нужно чтоб он отсчитывал столько дней сколько мне нужно, например у меня акция 20-25 дней, а я не могу поставить 20 или 25 дней! Он просто отсчитывает дни до следующего года. Как это убрать? 😐
Простой способ сделать несколько счетчиков на странице!
Делаете отдельную страницу на которой кроме счетчика ничего не будет, а затем на своей странице втыкаете фреймы в те места где нужен счетчик и даете им ссылку на страницу со счетчиком(фрейм и будет показывать счетчик). Вот и все! =)
Подскажите пожалуйста что сделать, где править! счетчик не начинает отсчет после установки на движок dle 10.0
на черновике работает — все элементы на своих местах — после загрузки всех js. и css. все корректно кроме счетчика — форма есть а цифры не ведут отсчет (
❓ Как убрать дни?
❓ Зациклить таймер на 5 часов?
❓ После всего этого не сбивался при обновлении страницы?
Я уже замучился экспериментировать, т.к. в программировании = 0.
6597
![Youtube канал Александр Маврин](/files/img/youtube_subscribe.jpg")
Здравствуйте.
за скрипт! Отличный вариант для проведения акций на сайте. Перерыл много вариантов, Ваш понравился больше!
Пожалуйста.
Здравствуйте, можете подробно описать как это прикрутить к своей html странице, заранее благодарен..
На странице есть же описание. Откройте тему на forum.serblog.ru, вам ответят.
Здравствуйте, Александр! Отличный урок! У меня получилось разместить таймер на своем сайте, но случилось вот что. Теперь весь сайт(картинки, видео и сам таймер) выравнены по левому краю. В чем проблема? Помогите, пожалуйста! могу скинуть скрины
Возможно у вас конфликт CSS стилей. Посмотрите нет ли одинаковых классов и идентификаторов. Если есть, то нужно переименовать.
Не могу поменять дату на нужную , всегда стоит 216 дней откуда она берется и как мне поставить нужную мне дату.
области
10 /* Устанавливаем дни*/
20 /* Часы */
15 /* Минуты */
18 /* Секунды */
при их редактировании не меняю ничего
По умолчанию установлен отсчет до нового года. Меняйте дату на свою в этой строчке:
если поменять к примеру на
var christmas=»may 31, «+thischristmasyear+» 0:0:00″;
получается 366 дней , когда должно быть 2 дня
Поставьте ноль, вместо единицы.
Пожалуйста.
А как сделать циклический отсчёт на 2 дня? То есть отсчитал 2 дня и заново запустился.
P. S. Счётчик класс.
Щоб зробити циклічно на два дня слід в коді: christmas=»January 1, «+thischristmasyear+» 0:0:00″;
замість «.. 1 ..» вставити наступний код:
«+((new Date().getDate())+2)+»
Що робить код — він дістає з діючої дати число дня місяця і приплюсовує до нього 2. Тепер кожного дня з 12 ночі лічильник буде ставитись на 2 дня. 😉
Напиши подробнее пожалуйста 😉
«.. 1 ..» — это вот что?
Не работает, кто разобрался как сделать циклический таймер?
Куда вставляется
?
На сайт. В то место, где хотите его видеть.
Такой же вопрос как и у Сергея
А как сделать циклический отсчёт на 2 дня? То есть отсчитал 2 дня и заново запустился.
P. S. Спасибо! Счётчик класс.
C этим пока не разбирался. Может позже напишу как реализовать эту идею.
или хотябы что бы счётчик обновлялся вместе со страницей?
т.е человек зашёл а ему каждый раз новый отсчёт…
я в программировании не бум бум, и синтаксиса не знаю…
Как я понял берётся текущая дата и дата установленная вручную…может как то можно написать, что бы конечная дата была равна «текущая + 7 часов например»
у пользователя всегда будет меняться текущая дата…и значит отсчёт будет продливаться
В статье написано, что нужно делать, чтобы таймер не обновлялся каждый раз после перезагрузки страницы. Вы можете этого не делать и будет новый отсчет при каждой презагрузке. как сделать цикл, я пока не знаю.
Убрал код из тела страницы. теперь счётчик сбрасывается при обновлении. Но возник вопрос, как настроить время счётчика? Поставить например 5 часов, 43 минуты, 13 секунд
js/main.js в конце строчка
cf_draw(parseInt($(‘span’, this).text(), 10), parseInt($(‘span’, this).text(), 7), canvas, 10);
вот меняю то значение где сейчас 7..на счётчики все цифры становятся семёрками (7 часов, 7 минут и т.п) а нужно например 5 часов, 43 минуты, 13 секунд
Таймер устанавливается на конкретную дату.
Меняйте эту строчку:
Этот код вставляется в head если нужно что бы таймер не сбрасывался..а мне нужно что бы сбрасывался…я код не размещал этот…
В таков случае нужно писать с нуля новый цикл.
Александр, подскажите пожалуйста, как можно сделать так, что бы дни показывались двумя цифрами, а не тремя?
Сам разобрался)
В langing page необходимо установить два таких одинаковых счетчика. Возникла проблема — счетчики имеют разные показатели, и у одного из них секунды не анимируются. в чем может быть проблема?
Если можно, дайте ссылку на эту страницу. Так сходу сложно сказать.
sibarit.pusku.com
sibarit.pusku.com/
Для этого счетчика не все так просто, как кажется. Чтобы разместить второй, нужно изменить имеющиеся классы на странице, а так же в файле main.js.
Огромное за оперативный ответ! Буду разбираться в указанном направлении.
Всегда пожалуйста.
Установил тамер, но пришлось попотеть.
Там такая история, если папка с картинками находится не в каталоге с index.php то таймер не считает, что-бы он работал, необходимо в одной из последних строк строке main.js указать правильный путь к картинке
У меня получилось так
image.attr(‘src’, ‘/themes/uggi/css/i/sprites.png’);
. Полезное дополнение.
Спасибо! заработало)
Помогите сделать этот счетчик циклическим, как просил Сергей, мне тоже это нужно.
Пока не знаю как это сделать.
Просто удалить:
«$(‘.c-block:eq(0) .bl-inner span’).text(dayfield);»
И
«43 дней»
Задать время 48 часов,минут, сек..
Вот код для того чтоб счетчик был цыкличным и не скидывался.
Там, где написано: var christmas=»february 10, Меняете на месяц и число которое вам нужно и счетчик будет до этого числа отсчитывать.
Как можно уменьшить размер цифр таймера?
Попробуйте изменить здесь:
ничего не изменилось
Посмотрел, тоже не нашел. 😐 А зачем вам изменять эти значения?
в общем-то мне нужно уменьши общий размер таймера
Думаю, что это нелегко будет сделать.
😈 Таймер реально красивый!
Кроссбраузерность — отличная.
Но IE10 не хочет отображать отсчет. ❓
А вот этого не знал. У меня 9 версия еще стоит.
Сейчас попробовал на чистом index.php — работает.
Но на сайте моем не в какую не хочет, и в шапку засовывал, и на главную, и подвал в IE не работает! Скорей всего верстка у меня сайта кривая
Попросите кого-нибудь, пусть у себя посмотрят как смотрится ваш сайт. Может только у вас не работает. Бывает такое.
Сергей, а проверяете на локальном хосте или в инет залили а потом проверили? у меня на локальном верстка вообще в ie едет, а на нормальном хосте все корректно отображается, и счетчик этот уже на 5 лендов воткнул — все в ie работает
У меня верстка кривовата, может блок один съезжает, из-за этого span canvas на таймере съезжает, но он не отображается нигде. если добавляю span ещё, то появляется отсчет в одном блоке, но от этого считает не правильно
можете глянуть: vidsrtoy21(точка)ru
у меня что и на локалхост, что и на хостинге
Скажите пожалуйста, а можно ли задать таймеру определённый часовой пояс?
Может и можно, но как это сделать не могу сказать.
Здравствуйте Александр. Подскажите как убрать ноль в поле «Дней», чтоб там было только 2 цыфры?
Так было задумано изначально. Счетчик не я писал, поэтому не знаю как изменить.
Понятно. Буду сам разбираться
Сообщите, если получится. Тоже интересно.
ok
c-block выставляем 2 вместо 3
, пригодится. Счетчик пользуется популярностью.
! Не пришлось самому заморачиваться. Как 2 шт. поставить на сайт так, чтоб оба не сбрасывались?
У меня вообще не получилось 2 счетчика поставить, (точную проблему не помню) поэтому не могу сказать.
Вот и я не пойму, весь вечер просидел, так и не сообразил.
По моему этот счетчик не получится 2 раза на одну страницу поставить.
У меня получилось воткнуть 2 счетчика, для этого необходимо на втором счетчике в html-коде изменить классы, добавить эти новые классы для css-стилей, скопировать js-файл и изменить в нем классы на новые, не совсем удобно, но работает, вот пример сайта с двумя такими счетчиками spor-dtp.ru
То, что 2 раза нужно вставлять код, я знал, но это и правда не очень удобно. Хотя, на небольших сайтах можно использовать такой вариант.
Толян, это все здорово конечно. Таймер реально самый красивый что есть в инете, но Вы не пробовали сделать его цикличным?
Толян, можешь исходники твоего сайта выслать на sacred_metal@list.ru?
в main.js строку:
dig_col = parseInt($(canvas).parents(‘div.c-block’)[0].className.substr(-1), 10);
меняем на:
dig_col = parseInt($(canvas).parents(‘div.c-block’)[0].className.substr(-2), 10);
Было бы не плохо сделать плагином, и что была возможность установки нескольких счетчиков на одну страницу
На одну страницу можно поставить 2 счетчика! Я поставил и сделал чтоб они не скидывались после обновления страницы. Не чего там страшного нет и сложного тоже+ Толянова страница очень помогла)
Ребята нужна помощь! Год закончился и счетчик начал от счет заново! Т.е. он показывает 363 дня! Я не могу это убрать. Мне нужно чтоб он отсчитывал столько дней сколько мне нужно, например у меня акция 20-25 дней, а я не могу поставить 20 или 25 дней! Он просто отсчитывает дни до следующего года. Как это убрать?
В Демки тоже самое!
Ребята нужна помощь! Год закончился и счетчик начал от счет заново! Т.е. он показывает 363 дня! Я не могу это убрать. Мне нужно чтоб он отсчитывал столько дней сколько мне нужно, например у меня акция 20-25 дней, а я не могу поставить 20 или 25 дней! Он просто отсчитывает дни до следующего года. Как это убрать? 😐
Как вариант, можно установить любую другую дату. К примеру, если акция закончится через 20 дней, то поставьте ту дату, которая будет. (february 15)
Если не трудно, напиши куда именно вставить 20?
— Установите ноль, если акция в этом году (строка 12)
Как пример, до 10 февраля (строка 13)
Саня большое тебе спасибо. Все заработало! 😉
Ну и отлично. 🙂
Простой способ сделать несколько счетчиков на странице!
Делаете отдельную страницу на которой кроме счетчика ничего не будет, а затем на своей странице втыкаете фреймы в те места где нужен счетчик и даете им ссылку на страницу со счетчиком(фрейм и будет показывать счетчик). Вот и все! =)
Подскажите пожалуйста что сделать, где править! счетчик не начинает отсчет после установки на движок dle 10.0
на черновике работает — все элементы на своих местах — после загрузки всех js. и css. все корректно кроме счетчика — форма есть а цифры не ведут отсчет (
Не в курсе. Разбираться надо.
Подскажите как сделать так, чтобы таймер не сбрасывался после перезагрузки страницы?
Прочитайте внимательнее.
❓ Как убрать дни?
❓ Зациклить таймер на 5 часов?
❓ После всего этого не сбивался при обновлении страницы?
Я уже замучился экспериментировать, т.к. в программировании = 0.
Дни убрать очень просто — закоментируй html-код дней.
Копируйте код и устанавливайте на свой сайт в нужное место. Таймер обратного отсчета с необходимыми значениями появится у вас на сайте.