Обратный отсчет : Countdown : Таймер времени на сайте

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.