Google AMP - Tarih Geri Sayımı

Belirli bir tarihe kadar günleri, saatleri, dakikaları, saniyeleri görüntülemek için kullanılan Amp Date geri sayımı adlı başka bir amp bileşeni Y2K38 ( 2038)varsayılan olarak. Ekran, seçtiğiniz yerel ayarlara göre yapılabilir; varsayılan olarak tr'dir (İngilizce) .mp-date-countdown, verileri işlemek için amp-mustache şablonunu kullanır.

Bu bölümde, amp-date-countdown'ı daha ayrıntılı olarak anlamak için bazı çalışma örneklerine göz atacağız.

Amp-date-countdown ile çalışmak için aşağıdaki komut dosyasını eklememiz gerekir

Amp-date-countdown için

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

Amp-mustache için

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

Amp-tarih-geri sayım Etiketi

Amp-date-countdown etiketi aşağıdaki gibidir -

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

Amp-date-countdown için özellikler

Amp-date-countdown özellikleri buradaki tabloda listelenmiştir -

Sr.No Öznitelik ve Açıklama
1

end-date

Geri sayım için ISO biçimli bir tarih. Örneğin, 2025-08-01T00: 00: 00 + 08: 00
2

timestamp-ms

Milisaniye cinsinden bir POSIX epoch değeri; UTC saat dilimi olduğu varsayılır. Örneğin, timestamp-ms = "1521880470000"
3

timestamp-seconds

Saniye cinsinden bir POSIX epoch değeri; UTC saat dilimi olduğu varsayılır. Örneğin, timestamp-seconds = "1521880470"
4

timeleft-ms

Geri sayıma bırakılan milisaniye cinsinden bir değer. Örneğin, 50 saat sol timeleft-ms = "180.000.000"
5

offset-seconds (optional)

Verilen bitiş tarihine eklenecek veya çıkarılacak saniye sayısını gösteren pozitif veya negatif bir sayı. Örneğin, offset-seconds = "60", bitiş tarihine 60 saniye ekler
6

when-ended (optional)

0 saniyeye ulaştığında zamanlayıcının durdurulup durdurulmayacağını belirtir. Değer, zamanlayıcının 0 saniyede duracağını ve son tarihi geçmeyeceğini veya zamanlayıcının 0 saniyeye ulaştıktan sonra devam etmesi gerektiğini göstermeye devam etmeyeceğini belirtmek için durdur (varsayılan) olarak ayarlanabilir.
7

locale (optional)

Her bir zamanlayıcı birimi için bir uluslararasılaştırma dil dizesi. Varsayılan değer en'dir (İngilizce için). Desteklenen değerler aşağıda listelenmiştir.

Biçim

Geri sayımı görüntülemek için amp-date-countdown'ın kullandığı biçimler aşağıdaki tabloda verilmiştir -

Sr.No Biçim ve Açıklama
1

d

Günü 0,1,2,3 ... sonsuz olarak göster
2

dd

Günü 00,01,02,03 ... sonsuz olarak göster
3

h

Saati 0,1,2,3 ... sonsuz olarak göster
4

hh

Saati 00,01,02,03 ... sonsuz olarak göster
5

m

Dakikayı 0,1,2,3,4… sonsuz olarak göster
6

mm

Dakikayı 00,01,02,03… .infinity olarak görüntüle
7

s

0,1,2,3 ... sonsuz olarak saniye göster
8

ss

Saniyeyi 00,01,02,03… .infinity olarak görüntüle
9

days

Yerel ayara göre gün veya gün dizesini görüntüleyin
10

hours

Yerel ayara göre saat veya saat dizesini görüntüleyin
11

minutes

Yerel ayara göre dakika veya dakika dizesini görüntüleyin
12

seconds

Yerel ayara göre ikinci veya saniye dizesini görüntüle

Misal

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

Çıktı

Misal

Çalışan bir örnekle amp-countdown özelliklerini offset-seconds anlayalım -

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

Çıktı

Desteklenen Yerel Ayarların Listesi

Aşağıda, amp-date-countdown tarafından desteklenen yerel ayarların listesi verilmiştir -

Sr.No Ad ve Yerel Ayar
1

en

ingilizce
2

es

İspanyol
3

fr

Fransızca
4

de

Almanca
5

id

Endonezya dili
6

it

İtalyan
7

ja

Japonca
8

ko

Koreli
9

nl

Flemenkçe
10

pt

Portekizce
11

ru

Rusça
12

th

Tay dili
13

tr

Türk
14

vi

Vietnam
15

zh-cn

Basitleştirilmiş Çince
16

zh-tw

Çin geleneği

Şimdi, yukarıdaki yerel ayarlardan birini kullanarak geri sayımı görüntülemek için bir örnek deneyeceğiz.

Misal

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

Çıktı

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 - 2025 | All Rights Reserved