Google AMP - Datums-Countdown

Noch eine Amp-Komponente namens Amp Date Countdown, mit der Tage, Stunden, Minuten, Sekunden bis zu einem bestimmten Datum angezeigt werden, d. H. Y2K38 ( 2038)Die Anzeige kann nach Gebietsschemas Ihrer Wahl erfolgen. Standardmäßig ist es en (englisch). Amp-date-countdown verwendet eine Amp-Moustache-Vorlage zum Rendern von Daten.

In diesem Kapitel werden wir uns einige Arbeitsbeispiele ansehen, um den Countdown für das Amp-Datum genauer zu verstehen.

Um mit dem Amp-Date-Countdown zu arbeiten, müssen wir das folgende Skript hinzufügen

Für Amp-Date-Countdown

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

Für Amp-Schnurrbart

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

Amp-Date-Countdown-Tag

Das Amp-Date-Countdown-Tag lautet wie folgt:

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

Attribute für den Amp-Date-Countdown

Die Attribute für den Amp-Date-Countdown sind in der Tabelle hier aufgeführt -

Sr.Nr. Attribut & Beschreibung
1

end-date

Ein ISO-formatiertes Datum, bis zu dem heruntergezählt werden soll. Zum Beispiel 2025-08-01T00: 00: 00 + 08: 00
2

timestamp-ms

Ein POSIX-Epochenwert in Millisekunden; angenommen, UTC-Zeitzone zu sein. Zum Beispiel timestamp-ms = "1521880470000"
3

timestamp-seconds

Ein POSIX-Epochenwert in Sekunden; angenommen, UTC-Zeitzone zu sein. Beispiel: Zeitstempel-Sekunden = "1521880470"
4

timeleft-ms

Ein Wert in Millisekunden, der heruntergezählt werden muss. Zum Beispiel 50 Stunden übrig timeleft-ms = "180.000.000"
5

offset-seconds (optional)

Eine positive oder negative Zahl, die die Anzahl der Sekunden angibt, die zum angegebenen Enddatum addiert oder subtrahiert werden sollen. Zum Beispiel fügt Offset-Sekunden = "60" dem Enddatum 60 Sekunden hinzu
6

when-ended (optional)

Gibt an, ob der Timer gestoppt werden soll, wenn er 0 Sekunden erreicht. Der Wert kann auf Stopp (Standard) eingestellt werden, um anzuzeigen, dass der Timer bei 0 Sekunden stoppt und das Enddatum nicht überschreitet oder weiterhin anzeigt, dass der Timer nach Erreichen von 0 Sekunden fortgesetzt werden soll.
7

locale (optional)

Eine Internationalisierungssprachenzeichenfolge für jede Zeitgebereinheit. Der Standardwert ist en (für Englisch). Unterstützte Werte sind unten aufgeführt.

Format

Die Formate, mit denen der Amp-Date-Countdown den Countdown anzeigt, sind in der folgenden Tabelle aufgeführt:

Sr.Nr. Format & Beschreibung
1

d

Tag als 0,1,2,3 ... unendlich anzeigen
2

dd

Tag als 00,01,02,03 ... unendlich anzeigen
3

h

Anzeige Stunde als 0,1,2,3 ... unendlich
4

hh

Anzeige Stunde als 00,01,02,03 ... unendlich
5

m

Zeigen Sie die Minute als 0,1,2,3,4… unendlich an
6

mm

Anzeige der Minute als 00,01,02,03… .infinity
7

s

Zeigen Sie die Sekunde als 0,1,2,3 ... unendlich an
8

ss

Zeigen Sie die Sekunde als 00,01,02,03… .infinity an
9

days

Zeigen Sie die Zeichenfolge Tag oder Tag gemäß Gebietsschema an
10

hours

Anzeige der Stunden- oder Stundenzeichenfolge gemäß Gebietsschema
11

minutes

Anzeige der Minuten- oder Minutenzeichenfolge gemäß Gebietsschema
12

seconds

Zeigen Sie die zweite oder zweite Zeichenfolge gemäß dem Gebietsschema an

Beispiel

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

Ausgabe

Beispiel

Lassen Sie uns die Amp-Countdown-Attribute Offset-Sekunden anhand eines Arbeitsbeispiels verstehen -

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

Ausgabe

Liste der unterstützten Gebietsschemas

Das Folgende ist die Liste der Gebietsschemas, die vom Amp-Date-Countdown unterstützt werden:

Sr.Nr. Name & Gebietsschema
1

en

Englisch
2

es

Spanisch
3

fr

Französisch
4

de

Deutsche
5

id

Indonesisch
6

it

Italienisch
7

ja

japanisch
8

ko

Koreanisch
9

nl

Niederländisch
10

pt

Portugiesisch
11

ru

Russisch
12

th

Thai
13

tr

Türkisch
14

vi

Vietnamesisch
15

zh-cn

Vereinfachtes Chinesisch
16

zh-tw

Chinesische Tradition

Jetzt werden wir ein Beispiel ausprobieren, um den Countdown unter Verwendung eines der oben genannten Gebietsschemas anzuzeigen.

Beispiel

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

Ausgabe

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved