amp-data-countdown用于倒计时到显示在AMP HTML页面上的特定日期。它专门用作定时器或count-down。
所需脚本:添加amp-data-countdown组件。
HTML
<script async custom-element="amp-date-countdown" src=
"https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
</script>
添加amp-mustache组件
HTML
<script async custom-template="amp-mustache" src=
"https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
属性:
- end-date:它是ISO格式的日期倒计时。
- timeleft-ms:倒数到的毫秒值。
- offset-seconds:要添加到结束日期的数字。它可以是正面的或负面的。
- biggest unit:该属性可以设置为天,小时,分钟,秒(默认值:天)。没有显示大于用户定义单位的单位。例如,如果还有2天,而最大单位是小时,则显示还剩48小时。
- locale:设置计时器显示的语言。
英语 | 恩 |
德语 | 德 |
西班牙语 | es |
法语 | fr |
义大利文 | 它 |
日本人 | JA |
荷兰语 | nl |
韩国人 | KO |
俄语 | RU |
越南文 | 六 |
土耳其 | TR |
葡萄牙语 | pt |
泰国 | 日 |
简体中文/繁体中文 | zh-cn /zh-tw |
例:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP amp-date-countdown</title>
<!-- 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>
<!-- Include the `amp-mustache`
component ... -->
<script async custom-template=
"amp-mustache" src=
"https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-date-countdown/index.html">
<style amp-boilerplate>
body {
-webkit-animation:-amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation:-amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation:-amp-start 8s
steps(1, end) 0s 1 normal both;
animation:-amp-start 8s
steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility:hidden
}
to {
visibility:visible
}
}
@-moz-keyframes -amp-start {
from {
visibility:hidden
}
to {
visibility:visible
}
}
@-ms-keyframes -amp-start {
from {
visibility:hidden
}
to {
visibility:visible
}
}
@-o-keyframes -amp-start {
from {
visibility:hidden
}
to {
visibility:visible
}
}
@keyframes -amp-start {
from {
visibility:hidden
}
to {
visibility:visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<style amp-custom>
amp-date-countdown {
display:block;
}
</style>
</head>
<body>
<amp-date-countdown
timestamp-seconds="2147483648"
locale="en" layout="fixed-height"
height="100">
<template type="amp-mustache">
{{d}} {{days}}, {{h}} {{hours}},
{{m}} {{minutes}}, {{s}} {{seconds}}
</template>
</amp-date-countdown>
<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>
</body>
</html>
输出:
相关用法
- Google AMP amp-ad用法及代码示例
- Google AMP amp-accordion用法及代码示例
- Google AMP amp-facebook-like用法及代码示例
- Google AMP amp-carousel用法及代码示例
- Google AMP amp-brightcove用法及代码示例
- Google AMP amp-bind-recaptcha用法及代码示例
- Google AMP amp-autocomplete用法及代码示例
- Google AMP amp-img用法及代码示例
- Google AMP amp-image-lightbox用法及代码示例
- Google AMP amp-lightbox-gallery用法及代码示例
- Google AMP amp-soundcloud用法及代码示例
- Google AMP amp-mustache用法及代码示例
注:本文由纯净天空筛选整理自somsagar2019大神的英文原创作品 Google AMP amp-date-countdown。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。