倒计时／Countdown

# 倒计时／Countdown

<p class="uk-text-lead">创建一个简单的倒计时。</p>

## Usage-用法

要应用此组件，请将 `uk-countdown` 属性添加到容器元素，并定义倒计时到期的日期即可。 只需使用[ISO 8601 格式](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#ECMAScript_5_ISO-8601_format_support) ，添加 `date: YYYY-MM-DDThh:mm:ssTZD` 的选项到属性即可。例如 `2027-12-04T22:00:00+00:00` (UTC时间)。

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

| Class                   | 描述                                                 |
|:------------------------|:------------------------------------------------------------|
| `.uk-countdown-days`    | 显示倒计时的天数。     |
| `.uk-countdown-hours`   | 显示倒计时的小时数。    |
| `.uk-countdown-minutes` | 显示倒计时的分钟数。  |
| `.uk-countdown-seconds` | 显示倒计时的秒数。  |
| `.uk-countdown-number`  | 为倒计时添加必要的样式。 |

```html
<div uk-countdown="date: 2022-07-21T00:11:59+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>
```

```example
<div class="uk-grid-small uk-child-width-auto uk-margin" uk-grid uk-countdown="date: 2022-07-21T00:11:59+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-分隔符

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

```html
<div uk-countdown="date: 2025-07-21T00:11:59+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>
```

```example
<div class="uk-grid-small uk-child-width-auto uk-margin" uk-grid uk-countdown="date: 2025-07-21T00:11:59+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` class。

```html
<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>
```

```example
<div class="uk-grid-small uk-child-width-auto" uk-grid uk-countdown="date: 2029-07-21T00:11:59+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>
```

***

## Component options-组件选项

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

| 选项 | 可用值  | 默认值 | 描述 |
|:-------|:-------|:--------|:------------|
| `date` | String | `false` | ```Date.parse``` 可解析的任何字符串。查看[参考](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/parse). |

***

## JavaScript

进一步了解 [JavaScript 组件](javascript.md#programmatic-use)。

### Initialization／初始化

```js
UIkit.countdown(element, options);
```

### Methods／方法

以下方法可用于该组件：

#### Start／开始

```js
UIkit.countdown(element).start();
```

开始倒计时。

#### Stop／停止

```js
UIkit.countdown(element).stop();
```

停止倒计时。