Google AMP - Compte à rebours de la date

Encore un autre composant d'ampli appelé compte à rebours Amp Date qui est utilisé pour afficher les jours, heures, minutes, secondes jusqu'à une date donnée, c'est-à-dire Y2K38 ( 2038)par défaut. L'affichage peut être fait selon les paramètres régionaux de votre choix; par défaut, il est en (anglais) .Amp-date-countdown utilise le modèle amp-mustache pour le rendu des données.

Dans ce chapitre, nous examinerons quelques exemples de travail pour comprendre plus en détail amp-date-countdown.

Pour travailler avec amp-date-countdown, nous devons ajouter le script suivant

Pour amp-date-countdown

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

Pour amp-moustache

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

Balise amp-date-countdown

La balise amp-date-countdown est la suivante -

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

Attributs pour amp-date-countdown

Les attributs pour amp-date-countdown sont répertoriés dans le tableau ici -

Sr.Non Attribut et description
1

end-date

Une date au format ISO à décompter. Par exemple, 2025-08-01T00: 00: 00 + 08: 00
2

timestamp-ms

Une valeur d'époque POSIX en millisecondes; supposé être le fuseau horaire UTC. Par exemple, timestamp-ms = "1521880470000"
3

timestamp-seconds

Une valeur d'époque POSIX en secondes; supposé être le fuseau horaire UTC. Par exemple, timestamp-seconds = "1521880470"
4

timeleft-ms

Une valeur en millisecondes qui reste à décompter. Par exemple, 50 heures restantes timeleft-ms = "180 000 000"
5

offset-seconds (optional)

Un nombre positif ou négatif qui indique le nombre de secondes à ajouter ou à soustraire de la date de fin donnée. Par exemple, offset-seconds = "60" ajoute 60 secondes à la date de fin
6

when-ended (optional)

Spécifie s'il faut arrêter le minuteur lorsqu'il atteint 0 seconde. La valeur peut être réglée sur stop (par défaut) pour indiquer que la minuterie s'arrête à 0 seconde et ne passera pas la date finale ou continuera à indiquer que la minuterie doit continuer après avoir atteint 0 seconde.
sept

locale (optional)

Une chaîne de langue d'internationalisation pour chaque unité de minuterie. La valeur par défaut est en (pour l'anglais). Les valeurs prises en charge sont répertoriées ci-dessous.

Format

Les formats utilisés par amp-date-countdown pour afficher le compte à rebours sont indiqués dans le tableau suivant -

Sr.Non Format et description
1

d

Afficher le jour comme 0,1,2,3 ... infini
2

dd

Afficher le jour sous la forme 00,01,02,03 ... infini
3

h

Afficher l'heure comme 0,1,2,3 ... infini
4

hh

Afficher l'heure sous la forme 00,01,02,03 ... infini
5

m

Afficher les minutes comme 0,1,2,3,4… infini
6

mm

Afficher les minutes sous la forme 00,01,02,03… .infinity
sept

s

Afficher les secondes comme 0,1,2,3 ... infini
8

ss

Afficher la seconde sous la forme 00,01,02,03… .infinity
9

days

Afficher la chaîne du jour ou des jours selon les paramètres régionaux
dix

hours

Afficher la chaîne d'heures ou d'heures selon les paramètres régionaux
11

minutes

Afficher la chaîne des minutes ou des minutes selon les paramètres régionaux
12

seconds

Afficher la chaîne de secondes ou de secondes selon les paramètres régionaux

Exemple

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

Production

Exemple

Comprenons les attributs amp-countdown offset-seconds avec un exemple de travail -

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

Production

Liste des paramètres régionaux pris en charge

Voici la liste des paramètres régionaux pris en charge par amp-date-countdown -

Sr.Non Nom et paramètres régionaux
1

en

Anglais
2

es

Espagnol
3

fr

français
4

de

allemand
5

id

indonésien
6

it

italien
sept

ja

Japonais
8

ko

coréen
9

nl

néerlandais
dix

pt

Portugais
11

ru

russe
12

th

thaïlandais
13

tr

turc
14

vi

vietnamien
15

zh-cn

Chinois simplifié
16

zh-tw

Chinois (Traditionnel

Maintenant, nous allons essayer un exemple pour afficher le compte à rebours en utilisant l'un des paramètres régionaux ci-dessus.

Exemple

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

Production