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

Создание таймера обратного отсчета.

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

Чтобы применить компонент Обратный отсчет, добавьте к элементу контейнера атрибут uk-countdown и определите дату окончания отсчета. Добавьте к атрибуту опцию date: YYYY-MM-DDThh:mm:ssTZD, используя ISO 8601 format, например 2019-07-13T22:00:00+00:00 (время UTC).

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

Класс Описание
.uk-countdown-days Добавьте этот класс, чтобы указать дни, которые будут отсчитываться.
.uk-countdown-hours Добавьте этот класс, чтобы указать часы, которые будут отсчитываться.
.uk-countdown-minutes Добавьте этот класс, чтобы указать минуты, которые будут отсчитываться.
.uk-countdown-seconds Добавьте этот класс, чтобы указать секунды, которые будут отсчитываться.
.uk-countdown-number Этот класс добавляет необходимый стиль к номеру обратного отсчета.
<div uk-countdown="date: 2020-09-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: 2020-09-23T19:11:51+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: 2020-09-23T19:11:51+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: 2020-09-23T19: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: 2020-09-23T19: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>

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

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

Опция Значение По умолчанию Описание
date String false Любая строка, доступная для Date.parse. Смотрите ссылку.

JavaScript

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

Initialization

UIkit.countdown(element, options);

Methods

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

Start

UIkit.countdown(element).start();

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

Stop

UIkit.countdown(element).stop();

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

Документация
Компоненты