UIkit3.x文档

倒计时

创建一个简单的倒计时。

用法

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

将以下类添加到子元素以应用必要的功能和样式。

Class Description
.uk-countdown-days 显示倒计时的天数。
.uk-countdown-hours 显示倒计时的小时数。
.uk-countdown-minutes 显示倒计时的分钟数。
.uk-countdown-seconds 显示倒计时的秒数。
.uk-countdown-number 为倒计时添加必要的样式。 
<div uk-countdown="date: 2019-12-17T08:53:10+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: 2019-12-17T08:53:10+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>

分隔符

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

<div uk-countdown="date: 2019-12-17T08:53:10+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: 2019-12-17T08:53:10+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>

标签

要为每个数字添加标签，请添加.uk-countdown-label class.

<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>
  •  
    Days
    :
     
    Hours
    :
     
    Minutes
    :
     
    Seconds
  • <div class="uk-grid-small uk-child-width-auto" uk-grid uk-countdown="date: 2019-12-17T08:53:10+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">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>

选项

下面属性选项中的任何一个都可以应用于倒计时组件。如果要同时设置多个属性，那么每个属性之间请用分号分隔，相关更多信息请查看 组件配置。

Option Value Default Description
date String false Date.parse可解析的任何字符串。查看参考.

JavaScript

进一步了解 JavaScript 组件.

Initialization

UIkit.countdown(element, options);

方法

以下方法可用于该组件：

Start

UIkit.countdown(element).start();

开始倒计时。

Stop

UIkit.countdown(element).stop();

停止倒计时。