Google AMP: cuenta atrás de fechas
Otro componente de amplificador llamado Amp Date countdown que se usa para mostrar días, horas, minutos, segundos hasta una fecha determinada, es decir. Y2K38 ( 2038)por defecto. La visualización se puede hacer según las configuraciones regionales de su elección; por defecto es en (inglés). Amp-date-countdown usa la plantilla amp-mustache para renderizar datos.
En este capítulo, veremos algunos ejemplos prácticos para comprender amp-date-countdown con más detalle.
Para trabajar con amp-date-countdown, necesitamos agregar el siguiente script
Para amp-date-countdown
<script async custom-element = "amp-date-countdown"
src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
</script>Para amp-bigote
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>Etiqueta Amp-date-countdown
La etiqueta amp-date-countdown es la siguiente:
<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>Atributos de amp-date-countdown
Los atributos de amp-date-countdown se enumeran en la tabla aquí:
| No Señor | Atributo y descripción |
|---|---|
| 1 | end-date Una fecha con formato ISO para contar hacia atrás. Por ejemplo, 2025-08-01T00: 00: 00 + 08: 00 |
| 2 | timestamp-ms Un valor de época POSIX en milisegundos; se supone que es la zona horaria UTC. Por ejemplo, timestamp-ms = "1521880470000" |
| 3 | timestamp-seconds Un valor de época POSIX en segundos; se supone que es la zona horaria UTC. Por ejemplo, timestamp-seconds = "1521880470" |
| 4 | timeleft-ms Un valor en milisegundos que se deja en cuenta regresiva. Por ejemplo, quedan 50 horas timeleft-ms = "180,000,000" |
| 5 | offset-seconds (optional) Un número positivo o negativo que indica la cantidad de segundos que se deben sumar o restar de la fecha de finalización dada. Por ejemplo, offset-seconds = "60" agrega 60 segundos a la fecha de finalización |
| 6 | when-ended (optional) Especifica si se detiene el temporizador cuando llega a 0 segundos. El valor se puede configurar para detener (predeterminado) para indicar que el temporizador se detiene en 0 segundos y no pasará la fecha final o continuará para indicar que el temporizador debe continuar después de llegar a 0 segundos. |
| 7 | locale (optional) Una cadena de idioma de internacionalización para cada unidad de temporizador. El valor predeterminado es en (para inglés). Los valores admitidos se enumeran a continuación. |
Formato
Los formatos que usa amp-date-countdown para mostrar la cuenta regresiva se dan en la siguiente tabla:
| No Señor | Formato y descripción |
|---|---|
| 1 | d Mostrar día como 0,1,2,3 ... infinito |
| 2 | dd Mostrar día como 00,01,02,03 ... infinito |
| 3 | h Mostrar la hora como 0,1,2,3 ... infinito |
| 4 | hh Mostrar la hora como 00,01,02,03 ... infinito |
| 5 | m Muestra los minutos como 0,1,2,3,4… infinito |
| 6 | mm Muestra los minutos como 00,01,02,03… .infinity |
| 7 | s Mostrar segundo como 0,1,2,3 ... infinito |
| 8 | ss Mostrar el segundo como 00,01,02,03… .infinity |
| 9 | days Mostrar día o cadena de días según la configuración regional |
| 10 | hours Muestra la hora o la cadena de horas según la configuración regional |
| 11 | minutes Muestra la cadena de minutos o minutos según la configuración regional |
| 12 | seconds Mostrar cadena de segundos o segundos según la configuración regional |
Ejemplo
<!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>Salida
Ejemplo
Entendamos los atributos amp-countdown offset-seconds con un ejemplo de trabajo:
<!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>Salida
Lista de configuraciones regionales admitidas
La siguiente es la lista de configuraciones regionales compatibles con amp-date-countdown:
| No Señor | Nombre y configuración regional |
|---|---|
| 1 | en Inglés |
| 2 | es Español |
| 3 | fr francés |
| 4 | de alemán |
| 5 | id indonesio |
| 6 | it italiano |
| 7 | ja japonés |
| 8 | ko coreano |
| 9 | nl holandés |
| 10 | pt portugués |
| 11 | ru ruso |
| 12 | th tailandés |
| 13 | tr turco |
| 14 | vi vietnamita |
| 15 | zh-cn Chino simplificado |
| dieciséis | zh-tw Chino tradicional |
Ahora, probaremos un ejemplo para mostrar la cuenta regresiva usando una de las configuraciones regionales anteriores.
Ejemplo
<!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>Salida
