Таймер на js с печеньем - PullRequest
       3

Таймер на js с печеньем

0 голосов
/ 03 сентября 2018

Мне нужна помощь во внедрении таймера с куки. Когда страница была перезагружена, таймер продолжал идти от того места, где он остановился. Я использую jQuery и плагин для этого: jquery.cookie

Когда таймер запускается, ссылка отключается после ее активации. Нужны только минуты и секунды. Время жизни куки + составляет 5 минут.

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

var date = new Date();
var now = date.getMinutes();
var endTime = date.getMinutes() + 1;

if ($.cookie("timerMSG") == null) {
  $.cookie("timerMSG", endTime);
}

$(document).ready(function() {
  $('.link-item').on("click", function() {
    var _Seconds = ($.cookie("timerMSG") - now) * 60;
    $('.link-item').addClass("disable");
    $('.timer').removeClass("disable");

    var timer = setInterval(function() {
      if (_Seconds > 0) {
        _Seconds--;
        $('.second').text(_Seconds);
        $.cookie('my-cookie', _Seconds);
      } else {
        clearInterval(timer);
        $('.timer').addClass("disable");
        $('.link-item').removeClass("disable");
      }
    }, 1000);
  });
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="link col-md-12">
    <a href="#" class="link-item ">Go</a>
    <span class="timer disable">
      <span class="minets "></span> 
      min
    </span>
    <span class="second "></span> 
    sec
    </span>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...