倒數計時器

建立一個簡單的倒數計時器。

使用方式

要應用此元件，請將 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>

<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`	倒數計時結束後重新載入頁面。只有在計時器先前已啟動一次的情況下，才會重新載入頁面。