Google AMP - 日期倒计时

另一个名为 Amp Date countdown 的 amp 组件，默认情况下用于显示给定日期（即Y2K38（2038））之前的天、小时、分钟、秒。显示可以根据您选择的区域设置进行；默认为 en（英语）。Amp-date-countdown 使用 amp-mustache 模板来渲染数据。

在本章中，我们将看一些工作示例，以更详细地了解 amp-date-countdown。

要使用 amp-date-countdown，我们需要添加以下脚本

对于 amp-date-倒计时

<script async custom-element = "amp-date-countdown" 
   src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
</script>

对于小胡子

<script async custom-template = "amp-mustache" 
   src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>

amp-日期-倒计时标签

amp-date-countdown 标签如下 -

<amp-date-countdown timestamp-seconds = "2100466648"
   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>

amp-date-countdown 的属性

amp-date-countdown 的属性列于此处的表中 -

先生编号	属性及描述
1	结束日期要倒计时的 ISO 格式日期。例如，2025-08-01T00:00:00+08:00
2	时间戳毫秒以毫秒为单位的 POSIX 纪元值；假定为 UTC 时区。例如，时间戳-ms=“1521880470000”
3	时间戳秒以秒为单位的 POSIX 纪元值；假定为 UTC 时区。例如，时间戳秒=“1521880470”
4	剩余时间-ms 一个以毫秒为单位的值，需要倒计时。例如，还剩 50 小时 timeleft-ms="180,000,000"
5	偏移秒（可选）一个正数或负数，指示要从给定结束日期添加或减去的秒数。例如，offset-seconds="60" 在结束日期后添加 60 秒
6	何时结束（可选）指定定时器达到 0 秒时是否停止。该值可以设置为 stop（默认）以指示计时器在 0 秒处停止并且不会超过最终日期或 continue 指示计时器应在达到 0 秒后继续。
7	区域设置（可选）每个计时器单元的国际化语言字符串。默认值为 en（英语）。下面列出了支持的值。

格式

amp-date-countdown 用于显示倒计时的格式如下表所示 -

先生编号	格式及描述
1	d 将日期显示为 0,1,2,3...无穷大
2	DD 将日期显示为 00,01,02,03...无穷大
3	H 将小时显示为 0,1,2,3...无穷大
4	呵呵将小时显示为 00,01,02,03...无穷大
5	米将分钟显示为 0,1,2,3,4 … 无穷大
6	毫米将分钟显示为 00,01,02,03….无穷大
7	s 将秒显示为 0,1,2,3...无穷大
8	SS 将秒显示为 00,01,02,03 ….无穷大
9	天根据区域设置显示日期或日期字符串
10	小时根据区域设置显示小时或小时字符串
11	分钟根据区域设置显示分钟或分钟字符串
12	秒根据区域设置显示第二个或秒字符串

例子

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Date-Countdown</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">

      <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 custom-element = "amp-date-countdown" 
         src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
      </script>

      <script async custom-template="amp-mustache" src=
         "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
      </script>
   </head>
   
   <body>
      <h1>Google AMP - Amp Date-Countdown</h1>
      <amp-date-countdown 
         timestamp-seconds = "2145683234" 
         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>
   </body>
</html>

输出

例子

让我们通过一个工作示例来了解 amp-countdown 属性 offset-seconds -

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Date-Countdown</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <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 custom-element = "amp-date-countdown" 
         src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
      </script>

      <script async custom-template = "amp-mustache" 
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - Amp Date-Countdown</h1>
      <amp-date-countdown 
         end-date = "2020-01-19T08:14:08.000Z" 
         offset-seconds = "-50" 
         layout = "fixed-height" 
         height = "100">

         <template type = "amp-mustache">
            <p class = "p1">
               {{d}} days, {{h}} hours, {{m}} 
               minutes and {{s}} seconds until 50 
               seconds before 2020.
            </p>
         </template>
      </amp-date-countdown>
   </body>
</html>

输出

支持的区域设置列表

以下是 amp-date-countdown 支持的语言环境列表 -

先生编号	名称和区域设置
1	zh 英语
2	英语西班牙语
3	FR 法语
4	德德语
5	ID 印度尼西亚
6	它意大利语
7	贾日本人
8	科韩国人
9	NL 荷兰语
10	点葡萄牙语
11	茹俄语
12	th 泰国
13	t 土耳其
14	六越南语
15	zh-cn 简体中文
16	zh-tw 中国传统的

现在，我们将尝试一个示例，使用上述区域设置之一来显示倒计时。

例子

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Date-Countdown</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name="viewport" content="width = device-width, minimum-scale = 1,initial-scale = 1">

      <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 custom-element = "amp-date-countdown" 
         src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
      </script>

      <script async custom-template = "amp-mustache" 
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
      </script>
   </head>
   
   <body>
      <h1>Google AMP - Amp Date-Countdown</h1>
      <amp-date-countdown 
         locale = "ja" 
         end-date = "2020-01-19T08:14:08.000Z" 
         offset-seconds = "-50" 
         layout = "fixed-height" 
         height = "100">
         
         <template type = "amp-mustache">
            <p class = "p1">
               {{d}} {{days}}, {{h}} {{hours}}, {{m}} 
               {{minutes}} and {{s}} {{seconds}} until 
               50 seconds before 2020.
            </p>
         </template>
      </amp-date-countdown>
   </body>
</html>

输出