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