- PVSM.RU - https://www.pvsm.ru -

Простой таймер

На днях появилась надобность в таймере для сайта, но как всегда простая задача превратилась в весёлые часы работы.

Конечно, существует уже множество всяких разных таймеров с кучей настроек и плюшек. Но, на мой взгляд, быстрее решить такую достаточно простую задачу самому, чем искать, затем настраивать и разбираться в чужом решении. Так родился simpleTimer.

Оформлен он как jQuery-плагин. Для него я сделал репозиторий на github [1], так что можно легко будет изменить его под свои нужды (да и мне давно хотелось поработать с этим сервисом).

В репозитории есть пример страницы с подключенным плагином и вики-статья (на русском и ужасном английском). Но на всякий случай приведу здесь небольшое описание.

Подключение

Сам плагин подключается так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="simpleTimer.js"></script>
<script>
    $(document).ready(function(){
        $().simpleTimer({
            date : '22/15/48/0',
            format : 'hour',
            action : function(){
                alert("Example");
            }
        });
    });
</script>

А на страничке для отображение вставляете элемент с id=timer:

<div id="timer"></div>

Параметры

  • date задаёт дату события в формате день/час/минута/секунда
  • format задаёт формат вывода таймера
    • dayдень:час:минута:секунда
    • hourчас:минута:секунда
    • minминута:секунда

  • action задаёт действие, которые будет выполнено по окончанию таймера

Заключение

Вот в общем-то и всё. Не знаю нужно ли демо [2], но пусть будет :) Надеюсь кому-то этот «пустячок» пригодится, например, для акций интернет-магазинов или аукционах.

P.S. Если есть какие-то дополнения или замечания — буду рад выслушать.

Автор: ShpuntiK


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/11830

Ссылки в тексте:

[1] репозиторий на github: https://github.com/ShpuntiK/simpleTimer

[2] демо: http://alexivantsov.ru/simpleTimer/example.html