Еще один компонент усилителя, называемый обратным отсчетом даты усилителя, используется для отображения дней, часов, минут, секунд до заданной даты, т.е. по умолчанию Y2K38 (2038). Отображение может быть выполнено в соответствии с выбранными вами локалями; по умолчанию это en (английский) .Amp-date-countdown использует шаблон amp-mustache для рендеринга данных.
В этой главе мы рассмотрим некоторые рабочие примеры, чтобы более подробно понять обратный отсчет ампер-даты.
Для работы с 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>
Для усов
<script async custom-template = "amp-mustache" src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js"> </script>
Amp-date-countdown Tag
Тег обратного отсчета ампер-даты выглядит следующим образом:
<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 перечислены в таблице здесь —
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
Дата окончания Дата в формате ISO для обратного отсчета. Например, 2025-08-01T00: 00: 00 + 08: 00 |
| 2 |
временная метка мс Значение эпохи POSIX в миллисекундах; предполагается, что часовой пояс UTC. Например, timestamp-ms = «1521880470000» |
| 3 |
метки секунды Значение эпохи POSIX в секундах; предполагается, что часовой пояс UTC. Например, timestamp-seconds = «1521880470» |
| 4 |
TimeLeft-мс Значение в миллисекундах, которое остается для обратного отсчета. Например, 50 часов осталось timeleft-ms = «180 000 000» |
| 5 |
смещение секунд (необязательно) Положительное или отрицательное число, которое указывает количество секунд, которые будут добавлены или вычтены из заданной даты окончания. Например, offset-seconds = «60» добавляет 60 секунд к конечной дате |
| 6 |
когда заканчивается (необязательно) Указывает, останавливать ли таймер, когда он достигает 0 секунд. Значение может быть установлено на останов (по умолчанию), чтобы указать, что таймер остановится через 0 секунд, и не будет проходить окончательную дату или продолжать указывать, что таймер должен продолжаться после достижения 0 секунд. |
| 7 |
локаль (необязательно) Строка языка интернационализации для каждой единицы таймера. Значением по умолчанию является en (для английского). Поддерживаемые значения перечислены ниже. |
Дата окончания
Дата в формате ISO для обратного отсчета. Например, 2025-08-01T00: 00: 00 + 08: 00
временная метка мс
Значение эпохи POSIX в миллисекундах; предполагается, что часовой пояс UTC. Например, timestamp-ms = «1521880470000»
метки секунды
Значение эпохи POSIX в секундах; предполагается, что часовой пояс UTC. Например, timestamp-seconds = «1521880470»
TimeLeft-мс
Значение в миллисекундах, которое остается для обратного отсчета. Например, 50 часов осталось timeleft-ms = «180 000 000»
смещение секунд (необязательно)
Положительное или отрицательное число, которое указывает количество секунд, которые будут добавлены или вычтены из заданной даты окончания. Например, offset-seconds = «60» добавляет 60 секунд к конечной дате
когда заканчивается (необязательно)
Указывает, останавливать ли таймер, когда он достигает 0 секунд. Значение может быть установлено на останов (по умолчанию), чтобы указать, что таймер остановится через 0 секунд, и не будет проходить окончательную дату или продолжать указывать, что таймер должен продолжаться после достижения 0 секунд.
локаль (необязательно)
Строка языка интернационализации для каждой единицы таймера. Значением по умолчанию является en (для английского). Поддерживаемые значения перечислены ниже.
Формат
Форматы, которые использует amp-date-countdown для отображения обратного отсчета, приведены в следующей таблице:
| Sr.No | Формат и описание |
|---|---|
| 1 |
d Показать день как 0,1,2,3 … бесконечность |
| 2 |
дд Показать день как 00,01,02,03 … бесконечность |
| 3 |
час Показать час как 0,1,2,3 … бесконечность |
| 4 |
чч Показать час как 00,01,02,03 … бесконечность |
| 5 |
м Отображать минуты как 0,1,2,3,4… бесконечность |
| 6 |
мм Отображать минуты как 00,01,02,03… .infinity |
| 7 |
s Показывать секунду как 0,1,2,3 … бесконечность |
| 8 |
сс Показывать секунду как 00,01,02,03… .infinity |
| 9 |
дней Показать строку дней или дней согласно локали |
| 10 |
часов Показать строку часов или часов согласно локали |
| 11 |
минут Показать строку минут или минут согласно локали |
| 12 |
секунд Отображение секунд или секунд в соответствии с локалью |
d
Показать день как 0,1,2,3 … бесконечность
дд
Показать день как 00,01,02,03 … бесконечность
час
Показать час как 0,1,2,3 … бесконечность
чч
Показать час как 00,01,02,03 … бесконечность
м
Отображать минуты как 0,1,2,3,4… бесконечность
мм
Отображать минуты как 00,01,02,03… .infinity
s
Показывать секунду как 0,1,2,3 … бесконечность
сс
Показывать секунду как 00,01,02,03… .infinity
дней
Показать строку дней или дней согласно локали
часов
Показать строку часов или часов согласно локали
минут
Показать строку минут или минут согласно локали
секунд
Отображение секунд или секунд в соответствии с локалью
пример
<!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>
Выход
пример
Давайте разберемся с атрибутами отсчета ампер-секунд с рабочим примером —
<!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 —
| Sr.No | Имя и язык |
|---|---|
| 1 |
ан английский |
| 2 |
эс испанский |
| 3 |
фр Французский |
| 4 |
де Немецкий |
| 5 |
Я бы индонезийский |
| 6 |
Это итальянский |
| 7 |
JA японский язык |
| 8 |
ко корейский язык |
| 9 |
п Голландский |
| 10 |
пт португальский |
| 11 |
RU русский |
| 12 |
го тайский |
| 13 |
тр турецкий |
| 14 |
VI вьетнамский |
| 15 |
ж-сп Китайский упрощенный |
| 16 |
ZH-TW Китайский традиционный |
ан
английский
эс
испанский
фр
Французский
де
Немецкий
Я бы
индонезийский
Это
итальянский
JA
японский язык
ко
корейский язык
п
Голландский
пт
португальский
RU
русский
го
тайский
тр
турецкий
VI
вьетнамский
ж-сп
Китайский упрощенный
ZH-TW
Китайский традиционный
Теперь мы попробуем один пример для отображения обратного отсчета, используя один из приведенных выше языков.