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

Тема в разделе "JavaScript", создана пользователем Hekk0, 3 июл 2014.

Модераторы: ZiX
  1. Hekk0

    Hekk0 Создатель

    Регистр.:
    24 фев 2014
    Сообщения:
    49
    Симпатии:
    0
    Доброго времени суток.

    В 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>
    Таймер взят с Keith Wood. Callbacks, третий.
     
  2. bolonia

    bolonia Создатель

    Регистр.:
    5 дек 2010
    Сообщения:
    10
    Симпатии:
    2
    Чтобы таймер на сбрасывался можно сохранить его значение в сессиях, либо в cookies.

    Чтобы сделать много таймеров, можно использовать классы и через each пройтись по каждому соответствующему div'у:
    Код:
    $('.expireMessage').each(function () {
        $(this).countdown({
            until: shortly,
            expiryText: '<div class="over">Время вышло!</div>'
        });
    });
     
    Hekk0 нравится это.