Таймер обратного отсчета

Расширение ui.countdown добавляет таймер обратного отсчета. Доступно с версии ui 24.200.400.

Подключение

import { Countdown } from 'ui.countdown'; // es6
new Countdown(props);
    
new BX.UI.Countdown(props); // es5

PHP

\Bitrix\Main\UI\Extension::load('ui.countdown');

Параметры

Параметр `тип`	Описание
props `Object`	Коллекция параметров

Параметр props

Параметр `тип`	Описание
seconds `number`	Количество секунд для обратного отсчета. По умолчанию — `0`
node `HTMLElement`	Ссылка на DOM-элемент, в котором будет выведен таймер. Внутри этого элемента будет только таймер. При инициализации таймера все дочерние элементы будут очищены.
showIcon `boolean`	Показывать ли иконку перед таймером. По умолчанию — `true`
iconClass `string \| null`	CSS класс для своей иконки. По умолчанию `ui-icon-set --clock-2` — иконка часиков, как на картинке в начале. При использовании сета иконок из ui-icon-set подключите соответствующий пакет
showMinutes `boolean`	Делить ли секунды на минуты. По умолчанию — `true`. Например, если передали `150` секунд: при значении `true` таймер начнет отсчет с `2:30` при значении `false` — обратный отсчет чисел со `150` секунд
interval `number`	Интервал между тактами в миллисекундах для регулировки скорости отсчета. По умолчанию — `1000`. Примеры: При значении `1000` отсчет идет со скоростью 1 элемент в секунду При значении `200` отсчет идет со скоростью 5 элементов в секунду
needStartImmediately `boolean`	Начать ли отсчет автоматически. Может иметь значения: `true` — запускать отсчет автоматически при инициализации `false` — дождаться команды старта По умолчанию — `true`
hideAfterEnd `boolean`	Скрывать таймер после окончания отсчета. По умолчанию равен `false` — таймер останавливается на нуле
onTimerEnd `function`	Колбэк, вызываемый при достижении нуля. Например, можно сделать кнопку активной

Примеры использования

Простой таймер на 20 секунд

    <div id="simple-timer"></div>
    import { Countdown } from 'ui.countdown'; // es6
    new Countdown({
        seconds: 20,
        node: document.querySelector('#simple-timer'),
    });

Таймер без минут (обычный счетчик)

    <div id="simple-timer"></div>
    import { Countdown } from 'ui.countdown'; // es6
    new Countdown({
        seconds: 250,
        showMinutes: false,
        node: document.querySelector('#long-timer-without-minutes'),
    });

Таймер с колбэком

    <div id="callback"></div>
    <div id="button" style="margin-left: 20px;"></div>
    import { Countdown } from 'ui.countdown'; // es6
    import { Button, ButtonSize, ButtonColor } from 'ui.button';
    const button = new Button({
        text: 'Отправить',
        size: ButtonSize.SMALL,
        color: ButtonColor.PRIMARY,
    });
    button.renderTo(document.querySelector('#button'));
    
    new Countdown({
        seconds: 5,
        node: document.querySelector('#callback'),
        onTimerEnd: () => {
            button.setDisabled();
        },
    });

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Наверх