Google AMP - odliczanie dat

Jeszcze inny komponent wzmacniacza o nazwie Amp Date countdown, który służy do wyświetlania dni, godzin, minut, sekund do podanej daty, tj Y2K38 ( 2038)Domyślnie. Wyświetlanie może odbywać się według wybranych ustawień regionalnych; domyślnie jest to en (angielski). Amp-date-countdown używa szablonu amp-mustache do renderowania danych.

W tym rozdziale przyjrzymy się kilku praktycznym przykładom, aby bardziej szczegółowo zrozumieć odliczanie daty amp.

Aby pracować z amp-date-countdown, musimy dodać następujący skrypt

Do odliczania daty amp

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

Do wąsów typu amp-wąsy

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

Znacznik odliczający datę Amp

Tag amp-date-countdown jest następujący -

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

Atrybuty dla amp-date-countdown

Atrybuty dla amp-date-countdown są wymienione w tabeli tutaj -

Sr.No Atrybut i opis
1

end-date

Data w formacie ISO do odliczania. Na przykład 2025-08-01T00: 00: 00 + 08: 00

2

timestamp-ms

Wartość epoki POSIX w milisekundach; zakłada się, że jest to strefa czasowa UTC. Na przykład timestamp-ms = "1521880470000"

3

timestamp-seconds

Wartość epoki POSIX w sekundach; zakłada się, że jest to strefa czasowa UTC. Na przykład timestamp-seconds = "1521880470"

4

timeleft-ms

Wartość w milisekundach, która ma być odliczana. Na przykład pozostało 50 godzin timeleft-ms = „180 000 000”

5

offset-seconds (optional)

Dodatnia lub ujemna liczba wskazująca liczbę sekund, które mają zostać dodane lub odjęte od podanej daty końcowej. Na przykład offset-seconds = "60" dodaje 60 sekund do daty końcowej

6

when-ended (optional)

Określa, czy zatrzymać licznik czasu, gdy osiągnie 0 sekund. Wartość można ustawić na zatrzymanie (domyślnie), aby wskazać, że timer zatrzyma się po 0 sekundach i nie przekroczy daty końcowej, lub będzie kontynuował wskazanie, że licznik powinien działać po osiągnięciu 0 sekund.

7

locale (optional)

Ciąg języka internacjonalizacji dla każdej jednostki czasowej. Wartość domyślna to en (dla języka angielskiego). Obsługiwane wartości są wymienione poniżej.

Format

Formaty używane przez amp-date-countdown do wyświetlania odliczania podano w poniższej tabeli -

Sr.No Format i opis
1

d

Wyświetl dzień jako 0, 1, 2, 3 ... nieskończoność

2

dd

Wyświetl dzień jako 00,01,02,03 ... nieskończoność

3

h

Wyświetl godzinę jako 0,1,2,3 ... nieskończoność

4

hh

Wyświetl godzinę jako 00, 01, 02, 03 ... nieskończoność

5

m

Wyświetl minuty jako 0, 1, 2, 3, 4… nieskończoność

6

mm

Wyświetl minuty jako 00,01,02,03… .infinity

7

s

Wyświetlaj sekundę jako 0,1,2,3 ... nieskończoność

8

ss

Wyświetlaj sekundę jako 00,01,02,03… .infinity

9

days

Wyświetl ciąg dni lub dni zgodnie z ustawieniami regionalnymi

10

hours

Wyświetl ciąg godzin lub godzin zgodnie z ustawieniami regionalnymi

11

minutes

Wyświetlaj minuty lub minuty zgodnie z ustawieniami regionalnymi

12

seconds

Wyświetl ciąg sekund lub sekund zgodnie z ustawieniami regionalnymi

Przykład

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

Wynik

Przykład

Rozumiemy atrybuty odliczania wzmacniacza offset-sekundy na przykładzie roboczym -

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

Wynik

Lista obsługiwanych lokalizacji

Poniżej znajduje się lista ustawień regionalnych obsługiwanych przez amp-date-countdown -

Sr.No Nazwa i lokalizacja
1

en

język angielski

2

es

hiszpański

3

fr

Francuski

4

de

Niemiecki

5

id

indonezyjski

6

it

Włoski

7

ja

język japoński

8

ko

koreański

9

nl

holenderski

10

pt

portugalski

11

ru

Rosyjski

12

th

tajski

13

tr

turecki

14

vi

wietnamski

15

zh-cn

Uproszczony chiński

16

zh-tw

Chiński tradycyjny

Teraz wypróbujemy jeden przykład, aby wyświetlić odliczanie przy użyciu jednego z powyższych ustawień regionalnych.

Przykład

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

Wynik