Google AMP - Đếm ngược ngày

Tuy nhiên, một thành phần amp khác được gọi là Amp Date countdown được sử dụng để hiển thị ngày, giờ, phút, giây cho đến một ngày cụ thể tức là Y2K38 ( 2038)theo mặc định, hiển thị có thể được thực hiện theo ngôn ngữ bạn chọn; theo mặc định, nó là en (tiếng anh) .Amp-date-countdown sử dụng mẫu amp-ria mép để hiển thị dữ liệu.

Trong chương này, chúng ta sẽ xem xét một số ví dụ làm việc để hiểu chi tiết hơn về amp-date-countdown.

Để làm việc với amp-date-countdown, chúng ta cần thêm tập lệnh sau

Đối với amp-date-countdown

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

Đối với amp-ria mép

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

Thẻ Amp-date-countdown

Thẻ amp-date-countdown như sau:

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

Các thuộc tính cho amp-date-countdown

Các thuộc tính cho amp-date-countdown được liệt kê trong bảng ở đây -

Sr.No Thuộc tính & Mô tả
1

end-date

Ngày được định dạng ISO để đếm ngược. Ví dụ: 2025-08-01T00: 00: 00 + 08: 00
2

timestamp-ms

Giá trị kỷ nguyên POSIX tính bằng mili giây; được giả định là múi giờ UTC. Ví dụ: timestamp-ms = "1521880470000"
3

timestamp-seconds

Giá trị kỷ nguyên POSIX tính bằng giây; được giả định là múi giờ UTC. Ví dụ: timestamp-seconds = "1521880470"
4

timeleft-ms

Một giá trị tính bằng mili giây còn lại để đếm ngược. Ví dụ: 50 giờ còn lại timeleft-ms = "180.000.000"
5

offset-seconds (optional)

Một số dương hoặc âm cho biết số giây được cộng hoặc trừ từ ngày kết thúc nhất định. Ví dụ: offset-seconds = "60" thêm 60 giây vào ngày kết thúc
6

when-ended (optional)

Chỉ định có dừng bộ hẹn giờ khi đến 0 giây hay không. Giá trị có thể được đặt thành dừng (mặc định) để cho biết bộ hẹn giờ dừng ở 0 giây và sẽ không vượt qua ngày cuối cùng hoặc tiếp tục cho biết bộ hẹn giờ sẽ tiếp tục sau khi đạt đến 0 giây.
7

locale (optional)

Một chuỗi ngôn ngữ quốc tế hóa cho mỗi đơn vị hẹn giờ. Giá trị mặc định là en (đối với tiếng Anh). Các giá trị được hỗ trợ được liệt kê bên dưới.

định dạng

Các định dạng mà amp-date-countdown sử dụng để hiển thị đếm ngược được đưa ra trong bảng sau:

Sr.No Định dạng & Mô tả
1

d

Hiển thị ngày dưới dạng 0,1,2,3 ... vô cực
2

dd

Hiển thị ngày dưới dạng 00,01,02,03 ... vô cực
3

h

Hiển thị giờ dưới dạng 0,1,2,3 ... vô cực
4

hh

Hiển thị giờ dưới dạng 00,01,02,03 ... vô cực
5

m

Hiển thị phút dưới dạng 0,1,2,3,4… vô cực
6

mm

Hiển thị phút dưới dạng 00,01,02,03… .infinity
7

s

Hiển thị giây dưới dạng 0,1,2,3 ... vô cực
số 8

ss

Hiển thị giây dưới dạng 00,01,02,03… .infinity
9

days

Hiển thị chuỗi ngày hoặc chuỗi ngày theo ngôn ngữ
10

hours

Hiển thị giờ hoặc chuỗi giờ theo ngôn ngữ
11

minutes

Hiển thị phút hoặc chuỗi phút theo ngôn ngữ
12

seconds

Hiển thị chuỗi giây hoặc giây theo ngôn ngữ

Thí dụ

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

Đầu ra

Thí dụ

Hãy để chúng tôi hiểu thuộc tính amp-countdown offset-seconds với ví dụ làm việc

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

Đầu ra

Danh sách các ngôn ngữ được hỗ trợ

Sau đây là danh sách các ngôn ngữ được hỗ trợ bởi amp-date-countdown -

Sr.No Tên & Ngôn ngữ
1

en

Tiếng Anh
2

es

người Tây Ban Nha
3

fr

người Pháp
4

de

tiếng Đức
5

id

Người Indonesia
6

it

người Ý
7

ja

tiếng Nhật
số 8

ko

Hàn Quốc
9

nl

Tiếng hà lan
10

pt

Người Bồ Đào Nha
11

ru

tiếng Nga
12

th

Thái
13

tr

Thổ nhĩ kỳ
14

vi

Tiếng Việt
15

zh-cn

Tiếng Trung giản thể
16

zh-tw

Truyền thống Trung Hoa

Bây giờ, chúng ta sẽ thử một ví dụ để hiển thị đếm ngược bằng một trong các ngôn ngữ ở trên.

Thí dụ

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

Đầu ra

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