Google AMP - обратный отсчет даты

Еще один компонент усилителя под названием Amp Date countdown, который используется для отображения дней, часов, минут, секунд до заданной даты, т.е. Y2K38 ( 2038)по умолчанию. Отображение может быть выполнено в соответствии с вашим выбором; по умолчанию это en (английский). amp-date-countdown использует шаблон amp-mustache для визуализации данных.

В этой главе мы рассмотрим несколько рабочих примеров, чтобы более подробно разобраться в amp-date-countdown.

Для работы с amp-date-countdown нам нужно добавить следующий скрипт

Для amp-date-countdown

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

Для amp-усов

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

Тег Amp-date-countdown

Тег 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

end-date

Дата в формате ISO для обратного отсчета. Например, 2025-08-01T00: 00: 00 + 08: 00.
2

timestamp-ms

Значение эпохи POSIX в миллисекундах; Предполагается, что это часовой пояс UTC. Например, timestamp-ms = "1521880470000".
3

timestamp-seconds

Значение эпохи POSIX в секундах; Предполагается, что это часовой пояс UTC. Например, timestamp-seconds = "1521880470".
4

timeleft-ms

Значение в миллисекундах, до которого нужно вести обратный отсчет. Например, осталось 50 часов timeleft-ms = "180 000 000".
5

offset-seconds (optional)

Положительное или отрицательное число, которое указывает количество секунд, которое нужно добавить или вычесть из заданной конечной даты. Например, смещение-секунды = "60" добавляет 60 секунд к дате окончания.
6

when-ended (optional)

Указывает, останавливать ли таймер, когда он достигает 0 секунд. Значение может быть установлено на остановку (по умолчанию), чтобы указать, что таймер остановится на 0 секундах и не пройдет окончательную дату, или продолжит, чтобы указать, что таймер должен продолжить работу после достижения 0 секунд.
7

locale (optional)

Строка языка интернационализации для каждого таймера. Значение по умолчанию - en (для английского языка). Поддерживаемые значения перечислены ниже.

Формат

Форматы, которые amp-date-countdown использует для отображения обратного отсчета, приведены в следующей таблице:

Старший Нет Формат и описание
1

d

Отображать день как 0,1,2,3 ... бесконечность
2

dd

Отображать день как 00,01,02,03 ... бесконечность
3

h

Отображать час как 0,1,2,3 ... бесконечность
4

hh

Отображение часа как 00,01,02,03 ... бесконечность
5

m

Отображать минуты как 0,1,2,3,4… бесконечность
6

mm

Отображать минуты как 00,01,02,03… .infinity
7

s

Отображать секунду как 0,1,2,3 ... бесконечность
8

ss

Отображать секунды как 00,01,02,03… .infinity
9

days

Отображение строки дня или дней в соответствии с локалью
10

hours

Отображение часа или строки часов в соответствии с локалью
11

minutes

Отображение минут или минут в соответствии с локалью
12

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

en

английский
2

es

испанский язык
3

fr

французский язык
4

de

Немецкий
5

id

индонезийский
6

it

Итальянский
7

ja

Японский
8

ko

корейский язык
9

nl

Голландский
10

pt

португальский
11

ru

русский
12

th

Тайский
13

tr

турецкий
14

vi

вьетнамский
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>

Вывод

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved