November 11, 2011

jQuery Backward Timer (Таймер обратного отсчёта)


ACHTUNG! ВНИМАНИЕ! ATTENTION!

Таймер обратного отсчета вынесен в отдельный jQuery-плагин. Всю необходимую информацию можно получить на странице плагина. Текст ниже оставлен для истории.


    Таймер обратного отсчёта, имеющий следующие возможности:
  1. установка времени отсчёта в секундах;
  2. установка названий единиц измерения;
  3. выполнение действия по истечению установленного времени.
     Пример работы:
 
    Исходный код примера:
<div style="background: #ddf; color: 77a; padding: 3px 30px; border: 1px #99a dashed; margin: 5px 0;">
    <span id="timerOutput"></span><br/>
</div>

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript"
    src="http://dl.dropbox.com/u/76022516/proj/js/timerBackward.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#timerOutput').addAndRunBackwardTimer({
        seconds: '172800',
        timeUnitsNames: {
            h: "ч",
            m: "мин",
            s: "сек"
        },
    })
});
</script>
    Если необходимо вызвать какую-то функцию по истечении времени, то это будет выглядеть примерно так:
<script type="text/javascript">
function foo() {
//
}

$(document).ready(function() {
    $('#timerOutput').addAndRunBackwardTimer({
        seconds: '100000',
        timeUnitsNames: {
            h: "ч",
            m: "мин",
            s: "сек"
        },
        onTimerStop : foo
    })
});
</script>
   Использование "$(document).ready()" необязательно. Вообще, зависимость от jQuery очень незначительна и при необходимости можно легко переписать на чистом js.

[Ссылка на скрипт]

3 comments:

  1. Как остановить таймер при необходимости?

    ReplyDelete
    Replies
    1. Конкретно этот таймер красиво не получится остановить. Я его сегодня переписал, пример можно увидеть здесь. Код плагина - с 5-й по 93-ю строки. Есть методы "start", "cancel", "reset".

      Необязательные параметры:
      'seconds': кол-во секунд;
      'format': формат вывода значения;
      'on_exhausted': функция, которая вызовется после завершения отсчета;
      'on_tick': функция, которая вызывается на каждом отсчете.

      Чуть позже оформлю как библиотеку со страницей примеров.

      Delete
    2. Информацию о плагине можно получить на его странице.

      Delete