Компонент Обратный отсчет

Создание таймера обратного отсчета с использованием удивительного фреймворка UIkit 3. Таймер показывает, сколько времени осталось до заданного момента.

Countdown: Руководство

Чтобы применить компонент Обратный отсчет, добавьте к элементу контейнера атрибут uk-countdown и определите дату окончания отсчета. Необходимо добавить к атрибуту опцию date: YYYY-MM-DDThh:mm:ssTZD, используя ISO 8601 format, например 2021-03-29T19:11:51+00:00 (время UTC).

Добавьте следующие классы к дочерним элементам, чтобы применить необходимую функциональность таймеру Countdown.

Класс Описание
.uk-countdown-days Добавьте этот класс, чтобы указать дни, которые будут отсчитываться.
.uk-countdown-hours Добавьте этот класс, чтобы указать часы, которые будут отсчитываться.
.uk-countdown-minutes Добавьте этот класс, чтобы указать минуты, которые будут отсчитываться.
.uk-countdown-seconds Добавьте этот класс, чтобы указать секунды, которые будут отсчитываться.
.uk-countdown-number Добавьте этот класс, чтобы использовать его в качестве селектора для пользовательского стиля CSS. 
<div uk-countdown="date: 2021-01-23T19:11:51+00:00">
    <span class="uk-countdown-number uk-countdown-days"></span>
    <span class="uk-countdown-number uk-countdown-hours"></span>
    <span class="uk-countdown-number uk-countdown-minutes"></span>
    <span class="uk-countdown-number uk-countdown-seconds"></span>
</div>

Для стилизации обратного отсчета используйте классы стилей из компонента «База», компонента «Заголовок» или компонента «Текст». 

<div class="uk-text-large" uk-countdown="date: 2022-02-23T19:11:51+00:00"></div>

<div class="uk-text-large uk-text-warning uk-grid-small uk-child-width-auto" uk-grid uk-countdown="date: 2021-02-12T19:11:22+00:00">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
    </div>
    <div>
        <div class="uk-countdown-number uk-countdown-hours"></div>
    </div>
    <div>
        <div class="uk-countdown-number uk-countdown-minutes"></div>
    </div>
    <div>
        <div class="uk-countdown-number uk-countdown-seconds"></div>
    </div>
</div>

Разделитель

Разделитель между числами. Separator

Чтобы вставить разделитель между числами таймера Countdown, используйте класс .uk-countdown-separator. Как правило, для этого используется элемент <span>. 

<div uk-countdown="date: 2021-03-24T19:11:34+00:00">
    <span class="uk-countdown-number uk-countdown-days"></span>
    <span class="uk-countdown-separator">:</span>
    <span class="uk-countdown-number uk-countdown-hours"></span>
    <span class="uk-countdown-separator">:</span>
    <span class="uk-countdown-number uk-countdown-minutes"></span>
    <span class="uk-countdown-separator">:</span>
    <span class="uk-countdown-number uk-countdown-seconds"></span>
</div>
:
:
:
<div class="uk-grid-small uk-child-width-auto uk-heading-small uk-flex-middle" uk-grid uk-countdown="date: 2021-03-29T19:11:51+00:00">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-hours"></div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-minutes"></div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-seconds"></div>
    </div>
</div>

Дней : Часов : Мин : Сек

Метка : Ярлык : Label

Если нужно отобразить вместе с таймером словами дни, часы, минуты и секунды, используйте класс .uk-countdown-label. 

<div class="uk-countdown-label">Дней</div>
<div class="uk-countdown-label">Часов</div>
<div class="uk-countdown-label">Минут</div>
<div class="uk-countdown-label">Секунд</div>

Для стилизации меток используйте классы стилей из компонента «База», компонента «Заголовок» или компонента «Текст».

Дней
:
Часов
:
Минут
:
Секунд
<div class="uk-grid-small uk-child-width-auto uk-text-center uk-h1" uk-grid uk-countdown="date: 2021-03-29T19:11:51+00:00">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">Дней</div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-hours"></div>
        <div class="uk-countdown-label uk-text-small  uk-visible@s">Часов</div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-minutes"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">Минут</div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-seconds"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">Секунд</div>
    </div>
</div>

Параметры для атрибута

При использовании компонента Countdown к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция Значение По умолчанию Описание
date String false Любая строка, доступная для Date.parse. См. ссылку.
reload Boolean false Перезагрузить страницу после окончания обратного отсчета. Страница перезагружается только в том случае, если таймер уже был запущен один раз.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.countdown(element, options);

Методы

Для компонента «Countdown» доступны следующие методы:

Start

UIkit.countdown(element).start();

Начинает обратный отсчет.

Stop

UIkit.countdown(element).stop();

Останавливает обратный отсчет.

Доступность

Компонент обратного отсчета «Countdown» автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

  • Элемент контейнера имеет роль timer.