Countdown и обновление страницы

Hekk0 · 3 Июл 2014

Доброго времени суток.

В JS я не силен, поэтому появилась необходимость вашей помощи.

Есть countdown-таймер JS на 5 сек., который запускается по кнопке.
Все работает, но вот только при обновлении страницы таймер сбрасывается на исходное значение.

В связи с этим вопрос:
Каким образом заставить счетчик продолжать свою работу заданное время при обновлении страницы?

И за ним появляется второй вопрос:
Как разместить этот таймер в количестве больше трех штук на одной странице?

Код таймера(timer.js) :

Код:

$(document).ready(function(){
var shortly = 0;
$('#expireMessage').countdown({until: shortly,
    expiryText: '<div class="over">Время вышло!</div>'});
    
$('#expireMessageStart').click(function() {
    shortly = new Date();
    shortly.setSeconds(shortly.getSeconds() + 5.5);
    $('#expireMessage').countdown('option', {until: shortly});
});
    });

Код HTML страницы:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery/jquery.countdown.js"></script>
<script type="text/javascript" src="js/jquery/timer.js"></script>
</head>
<body>
<h2>Чтобы не записывать никуда и проще считать сколько осталось времени.</h2>
<div id="expireMessage"></div>
<button type="button" id="expireMessageStart">Start</button>
</body>
</html>

Таймер взят с Для просмотра ссылки Войди или Зарегистрируйся. Callbacks, третий.

bolonia · 9 Июл 2014

Чтобы таймер на сбрасывался можно сохранить его значение в сессиях, либо в cookies.

Чтобы сделать много таймеров, можно использовать классы и через each пройтись по каждому соответствующему div'у:

Код:

$('.expireMessage').each(function () {
    $(this).countdown({
        until: shortly,
        expiryText: '<div class="over">Время вышло!</div>'
    });
});

Countdown и обновление страницы

Hekk0

Постоялец

bolonia

Создатель