Google AMP - Conto alla rovescia della data

Ancora un altro componente amplificatore chiamato conto alla rovescia Amp Date che viene utilizzato per visualizzare giorni, ore, minuti, secondi fino a una determinata data, ad es Y2K38 ( 2038)per impostazione predefinita. La visualizzazione può essere eseguita secondo le impostazioni locali di tua scelta; per impostazione predefinita è en (inglese) .Amp-date-countdown utilizza il modello amp-mustache per il rendering dei dati.

In questo capitolo daremo uno sguardo ad alcuni esempi di lavoro per comprendere il conto alla rovescia di amp-date in maggior dettaglio.

Per lavorare con amp-date-countdown, dobbiamo aggiungere il seguente script

Per amp-date-countdown

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

Per baffi

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

Tag Amp-date-countdown

Il tag amp-date-countdown è il seguente:

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

Attributi per amp-date-countdown

Gli attributi per amp-date-countdown sono elencati nella tabella qui -

Suor n Attributo e descrizione
1

end-date

Una data in formato ISO per il conto alla rovescia. Ad esempio, 2025-08-01T00: 00: 00 + 08: 00
2

timestamp-ms

Un valore di epoca POSIX in millisecondi; si presume che sia il fuso orario UTC. Ad esempio, timestamp-ms = "1521880470000"
3

timestamp-seconds

Un valore di epoca POSIX in secondi; si presume che sia il fuso orario UTC. Ad esempio, timestamp-seconds = "1521880470"
4

timeleft-ms

Un valore in millisecondi di cui eseguire il conto alla rovescia. Ad esempio, 50 ore rimanenti timeleft-ms = "180.000.000"
5

offset-seconds (optional)

Un numero positivo o negativo che indica il numero di secondi da aggiungere o sottrarre dalla data di fine specificata. Ad esempio, offset-seconds = "60" aggiunge 60 secondi alla data di fine
6

when-ended (optional)

Specifica se interrompere il timer quando raggiunge 0 secondi. Il valore può essere impostato su stop (impostazione predefinita) per indicare che il timer si arresta a 0 secondi e non supererà la data finale o continuare a indicare che il timer deve continuare dopo aver raggiunto 0 secondi.
7

locale (optional)

Una stringa della lingua di internazionalizzazione per ciascuna unità timer. Il valore predefinito è en (per l'inglese). I valori supportati sono elencati di seguito.

Formato

I formati utilizzati da amp-date-countdown per visualizzare il conto alla rovescia sono riportati nella tabella seguente:

Suor n Formato e descrizione
1

d

Visualizza il giorno come 0,1,2,3 ... infinito
2

dd

Visualizza il giorno come 00,01,02,03 ... infinito
3

h

Visualizza l'ora come 0,1,2,3 ... infinito
4

hh

Visualizza l'ora come 00,01,02,03 ... infinito
5

m

Visualizza i minuti come 0,1,2,3,4… infinito
6

mm

Visualizza i minuti come 00,01,02,03… infinito
7

s

Visualizza i secondi come 0,1,2,3 ... infinito
8

ss

Visualizza i secondi come 00,01,02,03…. Infinito
9

days

Visualizza la stringa del giorno o dei giorni in base alle impostazioni internazionali
10

hours

Visualizza l'ora o la stringa delle ore in base alle impostazioni internazionali
11

minutes

Visualizza la stringa dei minuti o dei minuti in base alle impostazioni internazionali
12

seconds

Visualizza la stringa dei secondi o dei secondi in base alle impostazioni internazionali

Esempio

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

Produzione

Esempio

Cerchiamo di capire gli attributi di amp-countdown offset-seconds con un esempio funzionante:

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

Produzione

Elenco delle lingue supportate

Di seguito è riportato l'elenco delle impostazioni locali supportate da amp-date-countdown -

Suor n Nome e impostazioni locali
1

en

Inglese
2

es

spagnolo
3

fr

francese
4

de

Tedesco
5

id

indonesiano
6

it

italiano
7

ja

giapponese
8

ko

coreano
9

nl

olandese
10

pt

portoghese
11

ru

russo
12

th

tailandese
13

tr

Turco
14

vi

vietnamita
15

zh-cn

Cinese semplificato
16

zh-tw

Cinese tradizionale

Ora, proveremo un esempio per visualizzare il conto alla rovescia utilizzando una delle impostazioni locali sopra.

Esempio

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

Produzione