跳到主要内容

文档

倒计时

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

用法

要应用此组件，请将 uk-countdown 属性添加到容器元素，并定义倒计时到期的时间。只需将 date: YYYY-MM-DDThh:mm:ssTZD 选项添加到属性中，使用 ISO 8601 格式，例如 2025-01-23T20:00:53+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 字符串 false 任何可以被 Date.parse 解析的字符串。 请参阅 参考。
reload 布尔值 false 倒计时结束后重新加载页面。只有在计时器之前启动过一次的情况下，才会重新加载页面。

JavaScript

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

初始化

UIkit.countdown(element, options);

方法

以下方法可用于组件

开始

UIkit.countdown(element).start();

开始倒计时。

停止

UIkit.countdown(element).stop();

停止倒计时。

可访问性

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