amp-date-countdown
Introduction
amp-date-countdown
component allows to create a dynamic timer that counts down to the given date and time which you can render in your AMP page.
Setup
Include the amp-date-countdown
component ...
<script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script>
... and the amp-mustache
component in the header
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
Basic usage
You must specify one of timestamp-seconds
, timestamp-ms
or end-date
attributes. This indicates the date and time to count down to.
The countdown content is rendered via an amp-mustache template.
The number of days, hours, minutes and seconds remaining is bound to {{d}}
, {{h}}
, {{m}}
and {{s}}
respectively.
Double digit format variants ({{dd}}
, {{hh}}
, {{mm}}
and {{ss}}
) are also available.
<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
When using end-date
, specify the date in the ISO 8601 format.
You can optionally specify offset-seconds
to offset the provided date.
<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
If locale
is specified, {{days}}
, {{hours}}
, {{minutes}}
and {{seconds}}
are bound to the word(s) used to represent the given unit of time in the specified locale.
<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
The biggest-unit
attribute specifies the biggest unit used inside the template. For example, when biggest-unit="minutes"
is set, "2 days, 3 hours, 4 minutes, 5 seconds" becomes "0 days, 0 hours, 3064 minutes, 5 seconds", as 2 days and 3 hours are added to minutes.
<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 上的示例-
Written by @fstanis