Таймер с cookie на js

160

05 декабря 2018, 13:30

Нужна помощь в реализации таймера с куками. При перезагрузки страницы таймер продолжал идти с того где остановился. Использую jquery и плагин к нему jquery.cookie

При запуске таймера ссылка disable, по истечению active.

Нужны только минуты и секунды.

Время жизни кук +- 5 минут.

Гугл не помог.

Прошу поделиться вашим вариантом или помочь написать свой.

HTML

<div class="container">
    <div class="link col-md-12">
        <a href="#" class="link-item ">Старт счетчика</a>
        <span class="timer disable">
            <span class="minets "></span> минут</span>
            <span class="second "></span> секунд</span>
    </div>
</div>

В данный момент таймер выглядит вот так

$(document).ready(function () {
$('.link-item').on("click", function () {
 var _Seconds = 10;
  $('.link-item').addClass("disable");
  $('.timer').removeClass("disable");
    var timer = setInterval(function () {
        if (_Seconds > 0) {
            _Seconds--;
            $('.second').text(_Seconds);
            console.log(date.getTime());
        }
        else
        {
            clearInterval(timer);
            $('.timer').addClass("disable");
            $('.link-item').removeClass("disable");
        }
    }, 1000);
});
});

CSS если нужен

.link{
    margin-top:100px;
    text-align: center;
    width: 100%;
    height: 150px;
    background-color: #a38080;
}
.link-item{
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 300;
}
a{
    text-decoration: none;
    color: #222;
}
.timer{
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 300;
    color: rgb(190, 190, 190);
}
.disable{
    display: none;
}
a:hover{
    color: rgb(128, 255, 249);
    text-decoration: none;
}

Answer 1

Интересная задачка. Могу вам предложить упрощенный вариант, это только задумка, а дальше сможете доделать до конца.

В куке храним два значения первым количество секунд, вторым время, разделяем их точкой "10.1536005034605".

Потом считымаем куку, сплитим по точке парсим в цифры, отнимаем от текущего времени, делим на 1000 миллисекунд, округляем

const now = Date.now();
// считываем куку, если куки нет то ставим дефолтное значение. Сплитим по точке
const arr = ( $.cookie('timer') || `0.${now}` ).split('.');
// Парсим, вытягиваем значения деструктуризацией
const [s, time] = arr.map(i => parseInt(i, 10));
// отнимаем от текущего времени, делим на 1000 миллисекунд, округляем
let i = s + Math.floor((now - time) / 1000);
// Получаем нужное количество секунд

Полный код

<span class="second"></span> Секунд
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
    jQuery($ => {
        const $second = $('.second');
        const now = Date.now();
        const arr = ( $.cookie('timer') || `0.${now}` ).split('.');
        const [s, time] = arr.map(i => parseInt(i, 10));
        let i = s + Math.floor((now - time) / 1000);
        setInterval(() => {
            $second.text(i++);
            $.cookie('timer', `${i}.${Date.now()}`, { expires: 1 }); // перезаписываем куку
        }, 1000);
    });
</script>