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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки: ,

Похожие статьи:

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

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