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 纪元值；假定为 UTC 时区。例如，timestamp-ms="1521880470000"。

timestamp-seconds

一个以秒为单位的 POSIX 纪元值；假定为 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（可选）

包含此属性以反转倒计时的方向，改为向上计数。这对于显示自过去的某个目标日期以来经过的时间很有用。要使倒计时在目标日期过去后继续进行，请务必包含值为 continue 的 when-ended 属性。如果目标日期在未来，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>

呈现为