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