Таймер обратного отсчета на основе файлов cookie не работает

РЕДАКТИРОВАТЬ: Благодаря ответам, некоторые проблемы решены, однако он все еще не работает должным образом. Теперь он показывает правильный обратный отсчет при загрузке первой страницы, но как только cookie установлен и вы перезагрузите страницу, он показывает неправильное время, которое также перезапускается при каждой перезагрузке. Я обновил мой код ниже соответственно.

Я искал решение в течение нескольких дней, и ничего не получилось так, как мне нужно. Моя цель довольно проста - мне нужен таймер, который будет отсчитывать 3 дня, а затем повторяться. Фактически он может быть одинаковым для всех (с заданным сервером временем) или локальным (в зависимости от времени первого посещения пользователя). Мне нужно, чтобы он не обновлялся ни на перезагрузке страницы, ни в конце дня.

Итак, я пришел к выводу, что мне понадобятся куки: когда вы впервые заходите на страницу, таймер начинает отсчитывать до 3 дней. Если вы покинете сайт и зайдете через 2 дня, останется 1 день. Если вы уйдете и приедете снова через неделю, таймер снова начнет отсчитывать 3 дня.

Для перерыва я использую плагин от Keith Wood. Для куки я использую плагин от Klaus Hartl. Вот мой код до сих пор:

$(document).ready(function(){

    if (!$.cookie('offerTimer')){
        var now = new Date(); 
        timerValue = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3); 
        cookie = $.cookie('offerTimer', timerValue, { expires: 7, path: '/' });
    }else {
        cookie = $.cookie('offerTimer');
    }

    $('#until3d').countdown({until: cookie, format: 'HMS'});
    console.log('cookie is ' + cookie);
});

При загрузке первой страницы (когда куки не установлены) cookie возвращает:

offerTimer=Tue%20Jan%2007%202014%2000%3A00%3A00%20GMT%2B0800%20(%D0%9A%D1%80%D0%B0%D1%81%D0%BD%D0%BE%D1%8F%D1%80%D1%81%D0%BA%D0%BE%D0%B5%20%D0%B2%D1%80%D0%B5%D0%BC%D1%8F%20(%D0%B7%D0%B8%D0%BC%D0%B0)); expires=Thu, 30 Jan 2014 09:09:37 GMT; path=/

При втором и последующих посещениях возвращается cookie:

Tue Jan 07 2014 00:00:00 GMT+0800 (Красноярское время (зима))

Кириллица там есть, потому что я из России. Я почти уверен, что все, что мне, вероятно, нужно, это заставить куки возвращать дату в соответствующем формате, чтобы функция обратного отсчета работала правильно. Но я не понимаю, как он может показывать правильное время при первом выводе... Также я попытался установить формат даты в формате плагина обратного отсчета (для этого я использовал другие плагины), и результат был либо то же самое или это не сработало вообще.

PS: я знаю, что такой таймер легко обойти, но в данном случае это не считается проблемой.

РЕДАКТИРОВАТЬ: немного изменил код, благодаря пользователю 2310289.

Источник

3 ответа

Решение

Мне наконец удалось заставить это работать. Решение довольно простое.

Я использовал плагины, чтобы сделать это проще (среди прочего с jQuery):

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

И вот мой код:

$(document).ready(function(){

    if (!$.cookie('offerTimer')){
        var now = new Date(); 
        timer = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3);
        $.cookie('offerTimer', timer.format("yyyy, mm, dd"), { expires: 7, path: '/' });
    }

    var cookie = $.cookie('offerTimer');

    $('#until3d').countdown({until: new Date(cookie), format: 'HMS'});
});

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

Источник

Для начала now не определено

var threeDays = new Date();
now.getFullYear(), now.getMonth(), now.getDay() + 3

может быть, использовать переменную ThreeDays, как в

threeDays.getFullYear(), threeDays.getMonth(), threeDays.getDay() + 3

Также я думаю, что вы хотите сделать

var timerValue = new Date(now.getFullYear(), now.getMonth(), now.getDay() + 3);

И, наконец (возможно), кавычки вокруг неопределенного ключевого слова не нужны.

Источник

Заявление

if (cookie === "undefined")

это проблема. Вы не можете сравнить JavaScript undefined со строкой "undefined", Вот почему ваш код не вводится if состояние.

Либо сделать

if (!cookie)

или же

if (('' + cookie) === "undefined")

Источник
Другие вопросы по тегам