amp-date-countdown

1.0 0.1

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

<script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-date-countdown-1.0.css">

用法

顯示倒數計時序列，以指示排定事件發生前的剩餘時間。

amp-date-countdown 提供倒數計時時間資料，您可以在 AMP 網頁中轉譯這些資料。透過在 amp-date-countdown 標記中提供特定的屬性，amp-date-countdown 擴充功能會傳回時間參數清單，您可以將其傳遞至 amp-mustache 範本以進行轉譯。請參閱下方清單，以瞭解每個傳回的時間參數。

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

傳回的時間參數

下表列出您可以在 Mustache 範本中指定的格式

格式化值範例

下表提供 Mustache 範本中指定的格式化值範例，以及輸出範例

從 0.1 版遷移

實驗性 1.0 版 amp-date-countdown 使用屬性名稱 count-up，而非 0.1 版中的 data-count-up，以支援「向上計數」功能。如需更多詳細資訊，請參閱下方「屬性」下的 count-up 章節。

在有效的 AMP 文件外獨立使用

Bento 可讓您在非 AMP 網頁中使用 AMP 元件，而無需完全採用有效的 AMP。您可以取得這些元件，並將其置於不支援 AMP 的架構和 CMS 實作中。如需更多資訊，請參閱我們的指南在非 AMP 網頁中使用 AMP 元件。

若要尋找獨立版本的 amp-date-countdown，請參閱bento-date-countdown。

屬性

您必須至少指定下列必要屬性之一：end-date、timeleft-ms、timestamp-ms、timestamp-seconds。

end-date

要倒數計時至的 ISO 格式日期。例如：2020-06-01T00:00:00+08:00

timestamp-ms

POSIX Epoch 值 (毫秒)；假設為 UTC 時區。例如：timestamp-ms="1521880470000"。

timestamp-seconds

POSIX Epoch 值 (秒)；假設為 UTC 時區。例如：timestamp-seconds="1521880470"。

timeleft-ms

剩餘倒數計時的值 (毫秒)。例如：剩餘 48 小時 timeleft-ms="172800000"。

offset-seconds (選填)

正數或負數，代表要從 end-date 新增或減去的秒數。例如：offset-seconds="60" 會將 60 秒新增至結束日期。

when-ended (選填)

指定計時器在達到 0 秒時是否停止。值可以設定為 stop (預設值) 以表示計時器在 0 秒時停止，且不會超過最終日期；或設定為 continue 以表示計時器應在達到 0 秒後繼續計時。

locale (選填)

每個計時器單位的國際化語言字串。預設值為 en (英文)。

支援的值

biggest-unit (選填)

允許 amp-date-countdown 元件根據指定的 biggest-unit 值計算時間差。例如，假設剩餘 50 天 10 小時，如果 biggest-unit 設定為 hours，則結果會顯示剩餘 1210 小時。

• 支援的值：days、hours、minutes、seconds
• 預設值：days

count-up (選填)

加入此屬性可反轉倒數計時的方向，改為向上計數。這對於顯示自過去目標日期以來經過的時間非常有用。若要在目標日期已過時繼續倒數計時，請務必加入 when-ended 屬性並將值設為 continue。如果目標日期在未來，amp-date-countdown 將顯示遞減 (朝向 0) 的負值。

活動

amp-date-countdown 元件公開下列事件，您可以使用 AMP on-syntax 觸發

逾時

計時器逾時時。若要讓此動作發揮作用，when-ended 必須設定為 stop。計時器逾時時，您只能執行低信任度動作，例如 amp-animation 和 amp-video 動作。這是為了強制執行 AMP 的 UX 原則，即不允許在沒有明確使用者動作的情況下重新排列網頁內容。|

範例：示範逾時事件的用法

<h1 id="sample">
  When Timer hits 0, will hide the timer itself and hide this message.
</h1>

<amp-animation id="hide-timeout-event" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "1s",
      "fill": "both",
      "selector": "#ampdate, #sample",
      "keyframes": {"visibility": "hidden"}
    }
  </script>
</amp-animation>
<amp-date-countdown
  id="ampdate"
  end-date="2018-07-17T06:19:40+08:00"
  on="timeout: hide-timeout-event.start"
  height="400"
  width="400"
  when-ended="stop"
  locale="en"
>
  <template type="amp-mustache">
    <h1>Countdown Clock</h1>
    <div>
{{dd}} : {{hh)) : {{mm}} : {{ss}}    </div>
  </template>
</amp-date-countdown>

轉譯為