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 撰写