跳到主要内容

文档

Countdown

创建一个简单的倒计时计时器，用来展示距离某个时间点还剩多少天、多少小时。

用法

要使用这个组件，需要先为容器元素添加 uk-countdown 属性，并在该属性中指定倒计时结束的日期。只要在属性中加入 date: YYYY-MM-DDThh:mm:ssTZD 选项即可，日期需使用 ISO 8601 格式，例如 2026-11-03T01:47:12+00:00（UTC 时间）。

为倒计时的各个子元素添加下列类名，即可分别启用天、小时、分钟和秒的显示功能。

类 描述
.uk-countdown-days 添加该类，用于显示倒计时剩余的天数。
.uk-countdown-hours 添加该类，用于显示倒计时剩余的小时数。
.uk-countdown-minutes 添加该类，用于显示倒计时剩余的分钟数。
.uk-countdown-seconds 添加该类，用于显示倒计时剩余的秒数。
.uk-countdown-number 添加该类后，可将其用作自定义 CSS 样式的选择器。 
<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>

倒计时组件本身不提供文字样式，要调整它的外观，可使用 Base 组件、Heading 组件 或 Text 组件 中的样式类，把它们加到数字所在的元素上。

<div class="uk-h1" uk-countdown="date: {%isodate%}"></div>
<div class="uk-h1 uk-grid-small uk-child-width-auto uk-flex-middle 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-h1 uk-grid-small uk-child-width-auto uk-flex-middle 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>

要为这些标签设置样式，同样可使用 Base 组件、Heading 组件 或 Text 组件 中的样式类，例如调整字号或对齐方式。

Days
:
Hours
:
Minutes
:
Seconds
<div class="uk-grid-small uk-child-width-auto uk-text-center uk-margin" uk-grid uk-countdown="date: {%isodate%}">
    <div>
        <div class="uk-h1 uk-countdown-number uk-countdown-days"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">Days</div>
    </div>
    <div class="uk-h1"><div class="uk-countdown-separator">:</div></div>
    <div>
        <div class="uk-h1 uk-countdown-number uk-countdown-hours"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">Hours</div>
    </div>
    <div class="uk-h1"><div class="uk-countdown-separator">:</div></div>
    <div>
        <div class="uk-h1 uk-countdown-number uk-countdown-minutes"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">Minutes</div>
    </div>
    <div class="uk-h1"><div class="uk-countdown-separator">:</div></div>
    <div>
        <div class="uk-h1 uk-countdown-number uk-countdown-seconds"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">Seconds</div>
    </div>
</div>

组件选项

以下选项都可以通过组件属性传入，多个选项之间用分号分隔。更多信息请参考 组件配置 一章。

选项 值 默认值 描述
date String false 任意可被 Date.parse 解析的字符串，用于指定倒计时结束的时间。参见 Reference。
reload Boolean false 倒计时结束后是否重新加载页面。如果倒计时在初始化时就已经过期，则不会触发页面重新加载。

JavaScript

要进一步了解 JavaScript 组件的编程式用法，请参考 JavaScript 组件 一章。

初始化

UIkit.countdown(element, options);

方法

组件实例上提供了下列方法，可按需调用：

启动

UIkit.countdown(element).start();

启动倒计时计时器。

停止

UIkit.countdown(element).stop();

停止当前正在运行的倒计时。

可访问性

Countdown 组件会自动为相关的元素设置合适的 WAI-ARIA 角色、状态和属性，便于辅助技术读取。