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

Создание таймера обратного отсчета с использованием удивительного фреймворка 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 Этот класс добавляет необходимый стиль к номеру (цифре) обратного отсчета. 
<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-grid-small uk-child-width-auto uk-margin" 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-margin" 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-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-margin-small uk-text-center 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-margin-small uk-text-center 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-margin-small uk-text-center 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-margin-small uk-text-center 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.