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

Создание таймера обратного отсчета с использованием удивительного фреймворка 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. Смотрите ссылку.

JavaScript

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

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

UIkit.countdown(element, options);

Методы

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

Start

UIkit.countdown(element).start();

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

Stop

UIkit.countdown(element).stop();

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

Доступность

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

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