Индивидуальный таймер обратного отсчета времени

Индивидуальный таймер обратного отсчета

От автора: в комментариях к уроку Таймер обратного отсчета для сайта и на нашем форуме многих из Вас заинтересовал вопрос индивидуализации таймера. Под индивидуализацией в данном случае понимается индивидуальный отсчет таймера по времени для каждого конкретного клиента.

Например, мы хотим, чтобы наш таймер отсчитывал по времени ровно сутки, для каждого пользователя индивидуально. В таком случае, если Пользователь №1 зашел на страницу с таймером 1-го января в 13:00, то отсчет именно для него закончится 2-го января в 13:00. Для Пользователя №2, который, к примеру, зашел в этот же день в 15:00, отсчет закончится на следующий день в 15:00.

Итак, приступи к созданию онлайн таймера обратного отсчета времени

Детали учебника: «Таймер обратного отсчета времени»

Тема: JavaScript

Сложность: Средняя

Урок: Видео версия (.mp4)

Время: 00:41:38

Размер архива: 69 Mb

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e — в свободное время как раз занимаюсь его изучением.

скачать исходникискачать урок

Для работы нам потребуются исходники из урока Таймер обратного отсчета для сайта. Для того, чтобы реализовать поставленную задачу, нам необходимо как-то запоминать каждого клиента. Один из самых простых вариантов — это использование кук. Для простой работы с куками воспользуемся плагином jquery.cookie.js, который поместим в папку со скриптами и подключим в индексном файле:

<script type="text/javascript" src="js/jquery.cookie.js"></script>

Напомню, что в таймер конечная дата пока что передается статически. Поскольку конечная дата для каждого пользователя должна быть индивидуальной, следовательно, эту дату мы должны передавать динамически. Поэтому откроем файл script.js и внесем в него всего одну правку — в 8-ой строке в переменную date_new конечная дата будет присвоена из переменной dateEnd, значение которой мы будем получать в зависимости от того, когда пользователь впервые обратился к странице с таймером:

//Дата для обратного отсчета
var date_new = dateEnd;

Больше мы ничего не будем изменять в функции get_timer(). Теперь начнем писать JS-код в индексном файле. Наша задача получить конечную дату. Для этого необходимо получить текущую дату и прибавить к ней определенный промежуток времени. Этим промежутком могут быть минуты, часы, дни, месяцы и т.д. Нам достаточно оперировать только первыми тремя.

Итак, получим текущую дату:

var myDate = new Date();

Далее нам потребуется работа с методами объекта даты, с помощью которых можно изменять дни, часы и минуты. Воспользовавшись методом setDate() попробуем изменить дату, прибавив к ней 1 день. Результат выведем в консоль:

var myDate = new Date();
console.log(myDate);

myDate.setDate(myDate.getDate()+1);
console.log(myDate);

Как видим, число изменилось с 15-го на 16-го:

Точно таким же образом мы можем изменить часы и минуты. Это сделаем посредством методов setHours() и setMinutes(), соответственно.

var myDate = new Date();

myDate.setDate(myDate.getDate()+1);
myDate.setHours(myDate.getHours()+2);
myDate.setMinutes(myDate.getMinutes()+10);

В итоге к текущей дате будет добавлено 1 день 2 часа и 10 минут. Это и будет пример конечной даты. Но в таком виде получение конечной даты не совсем практично и не очень эстетично. Давайте оформим этот участок кода в виде функции:

var myDate = new Date();

function returnEndDate(d,h,m){
	myDate.setDate(myDate.getDate()+d);
	myDate.setHours(myDate.getHours()+h);
	myDate.setMinutes(myDate.getMinutes()+m);
	return myDate;
}

Функция принимает 3 аргумента — дни, часы и минуты, которые и прибавляются к текущей дате. Вернет функция уже конечную дату. Стоит уточнить, что для корректной работы обязательны все 3 аргумента. Если, к примеру, Вам нужно увеличить дату только на 1 день, не используя часы и минуты, то в качестве последних двух параметров (часы и минуты) достаточно просто передать нули.

Например, для увеличения даты на 2 часа функция будет вызываться следующим образом — returnEndDate(0,2,0). Для увеличения на 1 день 2 часа и 10 минут мы вызовем функцию с такими параметрами — returnEndDate(1,2,10).

Осталось лишь присвоить результат работы функции некой переменной, а именно, — переменной dateEnd, значение которой используется в функции get_timer().

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

Напишем простое условие:

if($.cookie("timer")){
	var dateEnd = $.cookie("timer");
}else{
	var dateEnd = returnEndDate(0,0,3);
	$.cookie("timer", dateEnd, {expires: 7});
}

Здесь мы проверяем, есть ли кука timer. Если есть, то в переменную dateEnd мы получим ее значение. Если же такой куки нет, то в переменную dateEnd мы вернем результат работы функции returnEndDate и создадим куку timer со значением конечной даты. Параметр expires задает количество дней, которое «проживет» кука.

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

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

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

Курс по программированию на языке PHP

Изучите PHP с нуля до результата!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (55)

  1. Sergey

    а как по истечении времени спрятать область страницы? ()

    • Андрей Кудлай

      Любой функцией сокрытия контента, либо перенаправлением на другую страницу.

      • sergey

        я имею ввиду чисто технически как прописать?

        • Андрей Кудлай

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

  2. Anton

    Хорошая идея! Осталось придумать «до чего» осталось время . Спасибо за новизну.

  3. maxima

    Здравствуйте!

    Напиште, пожалуйста, как продлить жизнь куки в данном примере, скажем на 3 дня (4320 секунд)?

    • Андрей Кудлай

      Здравствуйте.
      Немного странно выглядит вопрос, если Вы смотрели урок. Жизнь куки задается параметром expires. Там и указывайте нужное количество дней.

  4. Анна

    Добрый день!
    Очень нужна вешь!
    Пыталась установить на сайт на WordPress,
    но без результата.

    Выводилась картинка, а цифры не появлялись.
    Подскажите, пожалуйста, почему?

    • Андрей Кудлай

      Добрый день.
      На абстрактный вопрос возможен лишь абстрактный ответ — что-то сделали не так :)
      Задайте вопрос на нашем форуме, дайте ссылку на сайт и тогда можно будет попробовать что-то подсказать.

  5. Дмитрий

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

    • Андрей Кудлай

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

      • Дмитрий

        К сожалению решения данной проблемы на форуме не нашлось(

        • Алексей

          решение: вместо вывода сообщения об окончании отчета
          там где в условие else стоит: «$(«#clock»).html(«Отсчет закончен!!!»);»
          впишите следующий код:
          else {
          var myDate2 = new Date();
          function returnEndDate(d,h,m){
          myDate2.setDate(myDate2.getDate()+d);
          myDate2.setHours(myDate2.getHours()+h);
          myDate2.setMinutes(myDate2.getMinutes()+m);
          return myDate2;
          }
          var dateEnd2 = returnEndDate(0,12,27);
          //в скобках добавляем количество дней, часов и минут на которые необходимо увеличить таймер по окончанию отчета.
          $.cookie(«timer», dateEnd2, {expires: 1});
          document.location.replace(‘index.html’);
          }

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

  6. Виталий

    Задам один вопрос на который никто не может ответить, как зациклить таймер чтоб начинал отсчет каждые 6 дней например? Весь интернет натыкан таймерами, но никто не может справиться с данной задачей просто его зациклить

    • Андрей Кудлай

      Быть может, никто не может справиться потому, что решение этой задачи попросту никому не интересно? :) И в самом деле, то, что Вы хотите сделать, — это уже не будет таймером. Таймер — это скрипт, отсчитывающий время до заданной даты… после этого таймер заканчивает отсчет… точка… далее идет какое-либо действие, знаменующее конец отсчета (обнуление таймера, сообщение, редирект и т.д.). То, что хотите сделать Вы — это по сути некие самопереворачивающиеся песочные часы, но не таймер… фактически мне даже сложно представить какую пользу может иметь данный скрипт, поскольку непонятно, зачем мне на сайте меняющиеся циферки, постоянно отсчитывающие n-ое количество времени… непонятна цель сего действа.
      Но если все же есть задача, для которой может пригодиться этот скрипт, то алгоритм реализации его может быть примерно таким:
      1. При первом обращении пользователя к скрипту ему устанавливается кука, значением которой будет текущая дата + 6 дней.
      2. При каждом следующем обращении проверяется наличие данной куки и сравнивается дата в ней с текущей датой.
      2.1. Если дата в куке больше текущей, тогда продолжаем отсчет до даты, записанной в куке.
      2.2. Иначе, если дата в куке меньше текущей, тогда перезаписываем значение куки новым — текущая дата + 6 дней.
      Собственно, вот и весь алгоритм… Вам лишь остается проверить, насколько он реализуем в коде.

      • Виталий

        к сожалению не программист. если не сложно можно показать предложеный алгоритм?

        • Андрей Кудлай

          Показать в коде? К сожалению, в рамках комментариев написать код попросту нереально. Попробуйте на форуме разместить тему в разделе Предложение работы.

      • Анатолий

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

  7. Павел

    Спасибо Вам большущее! Весь интернет перерыл и наконец нашел то, что нужно!

  8. Анатолий

    Скажите, а если установить таймер на 3 дня(то есть добавить к текущему времени 3 дня), и жизнь куки параметром expires задать так же в 3 дня, будет ли это означать, что пользователь, заходя на сайт в течении 3 дней, будет видеть счетчик, постепенно приближающийся к нулю, но по истечении времени (3-х дней) счетчик снова начнет отсчитывать 3 дня?

    • Андрей Кудлай

      А почему бы не проверить самостоятельно эту теорию? ;)
      Да, Вы совершенно правы, по истечении 3-х дней в куку запишется новая дата с новым сроком жизни куки +3 дня, и таймер начнет заново отсчитывать 3 дня… там есть правда небольшой нюанс, но он практически несущественен.

  9. Анатолий

    :-) Расскажите, пожалуйста, про «небольшой нюанс»! Для меня это очень важно! :-)

    • Андрей Кудлай

      Все просто, этих нюансов я вижу парочку:
      1) таймер в таком случае может работать не меньше 1 дня, поскольку с помощью плагина jquery.cookie срок жизни куки можно задавать именно в днях, т.е. нельзя установить куку, скажем, на 1 час… но этот нюанс для Вас несущественен, поскольку прозвучал срок в 3 дня;
      2) и второй — если пользователь попадет на финальный отсчет и таймер отсчитает последнюю секунду, то таймер не начнет автоматический отсчет заново… пользователь увидит фразу об окончании отсчета… новый отсчет начнется только после обновления страницы… но вероятность такой ситуации, как Вы понимаете, минимальна… если же пользователь зайдет после истечение срока жизни куки, тогда все будет ок — таймер сразу же начнет новый отсчет.

      • Анатолий

        Спасибо Вам огромное за подробные ответы! Все уяснил! Ваш таймер очень гибок в настройках, именно то, что я искал! Забираю и пользуюсь! :-) Успехов Вам и еще раз спасибо!

  10. Павел

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

    • Андрей Кудлай

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

      • Павел

        Главное, что это возможно :) Т.е. нужно копировать все идентификаторы day, hour, и т.д. с изменением. Т.е. создать уже day2,hour2? А потом уже в скопировать скрипт и исправить данные там?

        • Андрей Кудлай

          Нет, не совсем. В скрипте ведь также есть жесткая привязка к идентификаторам, т.е. тогда получается, что на каждый счетчик нужен будет свой скрипт… так что, как вариант, нужно будет заменить все идентификаторы на классы в коде счетчика и в его скрипте… не проверял, конечно же, но теоретически должно работать :)

          • Павел

            Спасибо за ответ! Пошел пробовать :)

          • Павел

            Ура! Все получилось! :) Сначала конечно удивился зачем идентификаторы на классы менять, можно же просто переименовать, но сделал так, как написали вы и все получилось. А именно: 1) Создал копию скрипта (там где функция вызова таймера) и в копии поменял все «#» на «.» 2) В html поменял все id day0,day1,hour0,hour1,min0,min1,sec0,sec1 на class.
            И заработало. Спасибо еще раз :)

          • Андрей Кудлай

            Отлично! :)
            Всегда пожалуйста ;)

  11. Рустам

    Добрый вечер. У меня некорректно отображается текст «Отсчет окончен» после окончания таймера. Вместо букв вопросы, только восклицательные знаки видно. Подскажите пожалуйста как исправить.

    • Андрей Кудлай

      Здравствуйте.
      Поправьте кодировку файла согласно кодировке сайта. Вот урок на тему кодировок.

  12. Алексей

    Доброго времени суток!
    Подскажите, пожалуйста. В одном из интернет-учебников я нашел, что в expires время задается в секундах, а у вас в днях. я правильно понял, что в дни его переводит плагина jquery.cookie?

    • Андрей Кудлай

      Здравствуйте.
      В данном случае expires — это параметр, который используется плагином jquery.cookie. Задается он только в днях.

  13. Богдан

    Нашел наконец нужный функционал за целый день! Спасибо автору за труд.

    У меня новая задача стала-дизайн таймера:)Нужно, что бы на фоне были визуально разделены дни, часы, минуты, секунды. Как его настроить и можно ли это сделать, учитывая, что программированием не владею совсем, кроме как ставить теги и . Или можно получить подробные комментарии по файлу стилей, что за что отвечает, попробую заменить своими образцами…

    И еще уточните: для работы таймера на сайте нужно скопировать код с файла index и вставить в файл нужной страницы между тегами , а два других файла и папку кинуть в корневую папку сайта?

    PS: всего пару дней разбираюсь в этой сфере, поэтому не судите, если не разбираюсь в элементарном :)

  14. Анатолий

    Почему у меня cookie не ставятся, а все браузеры выдают одну ошибку: $.cookie is not a function

  15. Nur

    У меня не запоминаются куки в браузере Google Chrome(в остальных все нормально). Обновляю страницу и заново начинается отсчет времени.

    • Андрей Кудлай

      Рискну предположить, что вы запускаете приложение с рабочего стола. Дело в том, что для работы плагина кук в Хроме, необходимо запускать скрипт на сервере, т.е. по протоколу HTTP, а не по протоколу FILE.

  16. Nur

    И еще кодировку поменять не могу в файле script.js(работаю через notepade++)

  17. Iryna

    Здравствуйте, Андрей.
    Мне очень понравился урок) Спасибо за понятное объяснение, много нового для себя почерпнула.
    Благодарю Вас за то, что делитесь с нами своими знаниями)
    Удачи Вам)

  18. Наталья

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

  19. Олег

    У меня все шикарно работает, НО только в firefox. В опере и хроме куки не записываются. Подскажите в чем проблема может быть или куда копать?

    • Андрей Кудлай

      Скорее всего, Вы запускаете скрипт не на сервере, а просто с диска двойным кликом. В этом случае в Хроме и Опере действительно будет проблема. На сервере проблем быть не должно.

  20. Александр

    Здравствуйте интересует вопрос, возможно ли сделать такое, чтобы кука обновлялась автоматически без перезагрузки страницы, у меня, что то не получается это сделать(

  21. Александр

    Хотелось бы посмотреть реализацию версии скрипта отсчета времени до конца урока, т.е начало в 8 30 уроки по 45 минут + перемены, каждый день перезапуск этого скрипта без обновления страницы, плюс ещё как то бы реализовать чтобы уроки иногда могли быть по 30 минут, хотяб мысли, а так очень интересный видеоурок бы получился мне кажется

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree