От автора: в комментариях к уроку Таймер обратного отсчета для сайта и на нашем форуме многих из Вас заинтересовал вопрос индивидуализации таймера. Под индивидуализацией в данном случае понимается индивидуальный отсчет таймера по времени для каждого конкретного клиента.
Например, мы хотим, чтобы наш таймер отсчитывал по времени ровно сутки, для каждого пользователя индивидуально. В таком случае, если Пользователь №1 зашел на страницу с таймером 1-го января в 13:00, то отсчет именно для него закончится 2-го января в 13:00. Для Пользователя №2, который, к примеру, зашел в этот же день в 15:00, отсчет закончится на следующий день в 15:00.
Итак, приступи к созданию онлайн таймера обратного отсчета времени
Для работы нам потребуются исходники из урока Таймер обратного отсчета для сайта. Для того, чтобы реализовать поставленную задачу, нам необходимо как-то запоминать каждого клиента. Один из самых простых вариантов — это использование кук. Для простой работы с куками воспользуемся плагином jquery.cookie.js, который поместим в папку со скриптами и подключим в индексном файле:
|
1 |
<script type="text/javascript" src="js/jquery.cookie.js"></script> |
Напомню, что в таймер конечная дата пока что передается статически. Поскольку конечная дата для каждого пользователя должна быть индивидуальной, следовательно, эту дату мы должны передавать динамически. Поэтому откроем файл script.js и внесем в него всего одну правку — в 8-ой строке в переменную date_new конечная дата будет присвоена из переменной dateEnd, значение которой мы будем получать в зависимости от того, когда пользователь впервые обратился к странице с таймером:
|
1 2 |
//Дата для обратного отсчета var date_new = dateEnd; |
Больше мы ничего не будем изменять в функции get_timer(). Теперь начнем писать JS-код в индексном файле. Наша задача получить конечную дату. Для этого необходимо получить текущую дату и прибавить к ней определенный промежуток времени. Этим промежутком могут быть минуты, часы, дни, месяцы и т.д. Нам достаточно оперировать только первыми тремя.
Итак, получим текущую дату:
|
1 |
var myDate = new Date(); |
Далее нам потребуется работа с методами объекта даты, с помощью которых можно изменять дни, часы и минуты. Воспользовавшись методом setDate() попробуем изменить дату, прибавив к ней 1 день. Результат выведем в консоль:
|
1 2 3 4 5 |
var myDate = new Date(); console.log(myDate); myDate.setDate(myDate.getDate()+1); console.log(myDate); |
Как видим, число изменилось с 15-го на 16-го:
Точно таким же образом мы можем изменить часы и минуты. Это сделаем посредством методов setHours() и setMinutes(), соответственно.
|
1 2 3 4 5 |
var myDate = new Date(); myDate.setDate(myDate.getDate()+1); myDate.setHours(myDate.getHours()+2); myDate.setMinutes(myDate.getMinutes()+10); |
В итоге к текущей дате будет добавлено 1 день 2 часа и 10 минут. Это и будет пример конечной даты. Но в таком виде получение конечной даты не совсем практично и не очень эстетично. Давайте оформим этот участок кода в виде функции:
|
1 2 3 4 5 6 7 8 |
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 — недостаточно. Это значение еще и нужно сохранить в куках. При этом сохранять значение в куки нужно только в том случае, если куки с этим значением еще нет. И это логично. Если куки нет, значит мы считаем, что клиент пришел к нам впервые и запишем конечную дату в куки. Если же кука есть, значит она была уже записана ранее и, соответственно, клиент уже был у нас ранее. В таком случае мы не будем высчитывать для него конечную дату, а просто считаем ее из куки.
Напишем простое условие:
|
1 2 3 4 5 6 |
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% гарантии того, что конкретный пользователь, посетив впервые страницу с таймером, пройдет положенный цикл отсчета таймера, то здесь уже необходимо подключать регистрацию пользователя. Соответственно, таймер гарантированно привязывается именно к конкретному авторизованному пользователю. Но, повторюсь, в большинстве случаев Вам будет достаточно индивидуализации таймера по кукам.
На этом урок по созданию индивидуального таймера обратного отсчета времени окончен. Удачи Вам и до новых встреч!
Комментарии (60)