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