amp-date-countdown

簡介

amp-date-countdown 元件可建立動態計時器，倒數至指定日期和時間，您可以在 AMP 頁面中呈現。

設定

包含 amp-date-countdown 元件 ...

<script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script>

... 以及標頭中的 amp-mustache 元件

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

基本用法

您必須指定 timestamp-seconds、timestamp-ms 或 end-date 屬性之一。這表示要倒數至的日期和時間。

倒數內容透過 amp-mustache 範本呈現。

剩餘的天數、時數、分鐘數和秒數分別綁定至 {{d}}、{{h}}、{{m}} 和 {{s}}。雙位數格式變體（{{dd}}、{{hh}}、{{mm}} 和 {{ss}}）也可用。

<amp-date-countdown timestamp-seconds="2147483648" layout="fixed-height" height="100">
  <template type="amp-mustache">
      {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until <a href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>.
  </template>
</amp-date-countdown>

結束日期

使用 end-date 時，以 ISO 8601 格式指定日期。

您可以選擇性地指定 offset-seconds 來偏移提供的日期。

<amp-date-countdown end-date="2038-01-19T03:14:08.000Z" offset-seconds="-10" layout="fixed-height" height="100">
  <template type="amp-mustache">
      {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until 10 before <a href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>.
  </template>
</amp-date-countdown>

地區設定

如果指定了 locale，則 {{days}}、{{hours}}、{{minutes}} 和 {{seconds}} 會綁定至用於表示指定地區設定中給定時間單位的字詞。

<amp-date-countdown timestamp-seconds="2147483648" locale="ru" layout="fixed-height" height="100">
  <template type="amp-mustache">
      {{d}} {{days}}, {{h}} {{hours}}, {{m}} {{minutes}}, {{s}} {{seconds}}
  </template>
</amp-date-countdown>

最大單位

biggest-unit 屬性指定範本內使用的最大單位。例如，當 biggest-unit="minutes" 設定時，「2 天、3 小時、4 分鐘、5 秒」會變成「0 天、0 小時、3064 分鐘、5 秒」，因為 2 天和 3 小時會加到分鐘。

<amp-date-countdown timestamp-seconds="2147483648" biggest-unit="minutes" layout="fixed-height" height="100">
  <template type="amp-mustache">
      {{m}} minutes and {{s}} seconds until <a href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>.
  </template>
</amp-date-countdown>

需要進一步說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時聯繫其他 AMP 使用者，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。

在 GitHub 上編輯範例

由 @fstanis 撰寫