La cuenta regresiva de datos de amp se usa para realizar la cuenta regresiva hasta una fecha específica que se representa en la página HTML de AMP. Se utiliza específicamente como temporizador o cuenta regresiva.
Scripts requeridos: agregar el componente amp-data-countdown .
HTML
<script async custom-element="amp-date-countdown" src= "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"> </script>
Agregando el componente amp-moustache
HTML
<script async custom-template="amp-mustache" src= "https://cdn.ampproject.org/v0/amp-mustache-0.2.js"> </script>
Atributos:
- end-date: es la fecha con formato ISO para la cuenta regresiva.
- timeleft-ms: valor en milisegundos para la cuenta atrás.
- segundos de compensación: un número que se agregará a la fecha de finalización. Podría ser positivo o negativo.
- unidad más grande: este atributo se puede configurar como días, horas, minutos, segundos (predeterminado: días). No se muestra la unidad más grande que la unidad definida por el usuario. Por ejemplo, si quedan 2 días y la unidad más grande son las horas, muestra que quedan 48 horas.
- configuración regional: establece el idioma para la visualización del temporizador.
| inglés | es |
| Alemán | Delaware |
| español | es |
| Francés | es |
| italiano | eso |
| japonés | sí |
| Holandés | nl |
| coreano | ko |
| ruso | tu |
| vietnamita | vi |
| turco | tr |
| portugués | punto |
| tailandés | el |
| chino simplificado/tradicional | zh-cn/zh-tw |
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA