跳过至主要内容

文档

倒计时

创建一个简单的倒计时器。

用法

要应用此组件，请将 uk-countdown 属性添加到容器元素，并定义倒计时应到期的日期。只需将 date: YYYY-MM-DDThh:mm:ssTZD 选项添加到属性中，使用 ISO 8601 格式，例如 2024-04-22T07:30:51+00:00（UTC 时间）。

将以下类添加到子元素，以应用必要的函数和样式。

类 描述
.uk-countdown-days 添加此类以指示要倒计时的天数。
.uk-countdown-hours 添加此类以指示要倒计时的小时数。
.uk-countdown-minutes 添加此类以指示要倒计时的分钟数。
.uk-countdown-seconds 添加此类以指示要倒计时的秒数。
.uk-countdown-number 此类为倒计时数字添加必要的样式。 
<div uk-countdown="date: {%isodate%}">
    <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: {%isodate%}">
    <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>

分隔符

要在每个数字之间插入分隔符，请使用 .uk-countdown-separator 类。

<div uk-countdown="date: {%isodate%}">
    <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: {%isodate%}">
    <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>

标签

要为每个数字添加标签，请使用 .uk-countdown-label 类。

<div class="uk-countdown-label">Days</div>
<div class="uk-countdown-label">Hours</div>
<div class="uk-countdown-label">Minutes</div>
<div class="uk-countdown-label">Seconds</div>
  • 天
    :
    小时
    :
    分钟
    :
    秒
  • <div class="uk-grid-small uk-child-width-auto" uk-grid uk-countdown="date: {%isodate%}">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
        <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Days</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">Hours</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">Minutes</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">Seconds</div>
    </div>
</div>

组件选项

任何这些选项都可以应用于组件属性。用分号分隔多个选项。有关更多信息，请查看关于 组件配置 的章节。

选项 值 默认 描述
日期 字符串 假 任何可由 Date.parse 解析的字符串。见 参考.

JavaScript

了解更多关于 JavaScript 组件 的信息。

初始化

UIkit.countdown(element, options);

方法

以下方法可用于组件

开始

UIkit.countdown(element).start();

启动倒计时。

停止

UIkit.countdown(element).stop();

停止倒计时。

无障碍性

倒计时组件会自动设置适当的 WAI-ARIA 角色、状态和属性。