Google AMP - วันที่นับถอยหลัง

ส่วนประกอบแอมป์อื่นที่เรียกว่าการนับถอยหลังวันที่ของแอมป์ซึ่งใช้เพื่อแสดงวันชั่วโมงนาทีวินาทีจนถึงวันที่กำหนดเช่น Y2K38 ( 2038)ตามค่าเริ่มต้นการแสดงผลสามารถทำได้ตามสถานที่ที่คุณเลือก โดยค่าเริ่มต้นจะเป็น en (ภาษาอังกฤษ) แอมป์วันที่นับถอยหลังใช้เทมเพลต amp-mustache สำหรับการแสดงผลข้อมูล

ในบทนี้เราจะดูตัวอย่างการทำงานเพื่อทำความเข้าใจรายละเอียดเพิ่มเติมเกี่ยวกับ amp-date-countdown

ในการทำงานกับ amp-date-countdown เราจำเป็นต้องเพิ่มสคริปต์ต่อไปนี้

สำหรับแอมป์วันที่นับถอยหลัง

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

แอมป์วันที่ - แท็กนับถอยหลัง

แท็ก amp-date-countdown มีดังนี้ -

<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

แอตทริบิวต์สำหรับ amp-date-countdown แสดงอยู่ในตารางที่นี่ -

ซีเนียร์ No คุณสมบัติและคำอธิบาย
1

end-date

วันที่จัดรูปแบบ ISO เพื่อนับถอยหลัง ตัวอย่างเช่น 2025-08-01T00: 00: 00 + 08: 00
2

timestamp-ms

ค่ายุค POSIX หน่วยเป็นมิลลิวินาที ถือว่าเป็นเขตเวลา UTC ตัวอย่างเช่น timestamp-ms = "1521880470000"
3

timestamp-seconds

ค่ายุค POSIX เป็นวินาที ถือว่าเป็นเขตเวลา UTC ตัวอย่างเช่น timestamp-seconds = "1521880470"
4

timeleft-ms

ค่าหน่วยเป็นมิลลิวินาทีซึ่งเหลือให้นับถอยหลัง ตัวอย่างเช่น 50 ชั่วโมง left timeleft-ms = "180,000,000"
5

offset-seconds (optional)

จำนวนบวกหรือลบซึ่งระบุจำนวนวินาทีที่จะเพิ่มหรือลบออกจากวันที่สิ้นสุดที่กำหนด ตัวอย่างเช่น offset-seconds = "60" จะเพิ่ม 60 วินาทีในวันที่สิ้นสุด
6

when-ended (optional)

ระบุว่าจะหยุดตัวจับเวลาเมื่อถึง 0 วินาทีหรือไม่ สามารถตั้งค่าเป็นหยุด (ค่าเริ่มต้น) เพื่อระบุตัวจับเวลาให้หยุดที่ 0 วินาทีและจะไม่ผ่านวันที่สุดท้ายหรือยังคงระบุว่าตัวจับเวลาควรดำเนินต่อไปหลังจากถึง 0 วินาที
7

locale (optional)

สตริงภาษาสากลสำหรับหน่วยจับเวลาแต่ละหน่วย ค่าเริ่มต้นคือ en (สำหรับภาษาอังกฤษ) ค่าที่รองรับแสดงอยู่ด้านล่าง

รูปแบบ

รูปแบบที่ amp-date-countdown ใช้เพื่อแสดงการนับถอยหลังมีให้ในตารางต่อไปนี้ -

ซีเนียร์ No รูปแบบและคำอธิบาย
1

d

แสดงวันเป็น 0,1,2,3 ... อินฟินิตี้
2

dd

แสดงวันเป็น 00,01,02,03 ... อินฟินิตี้
3

h

แสดงชั่วโมงเป็น 0,1,2,3 ... อินฟินิตี้
4

hh

แสดงชั่วโมงเป็น 00,01,02,03 ... อินฟินิตี้
5

m

แสดงนาทีเป็น 0,1,2,3,4 …อินฟินิตี้
6

mm

แสดงนาทีเป็น 00,01,02,03 … .infinity
7

s

แสดงวินาทีเป็น 0,1,2,3 ... อินฟินิตี้
8

ss

แสดงวินาทีเป็น 00,01,02,03 … .infinity
9

days

แสดงสตริงวันหรือวันตามสถานที่
10

hours

แสดงสตริงชั่วโมงหรือชั่วโมงตามสถานที่
11

minutes

แสดงสตริงนาทีหรือนาทีตามโลแคล
12

seconds

แสดงสตริงวินาทีหรือวินาทีตามโลแคล

ตัวอย่าง

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

เอาต์พุต

ตัวอย่าง

ให้เราเข้าใจแอตทริบิวต์ amp-countdown offset-seconds ด้วยตัวอย่างการทำงาน -

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

เอาต์พุต

รายชื่อสถานที่ที่รองรับ

ต่อไปนี้เป็นรายการของสถานที่ที่รองรับโดย amp-date-countdown -

ซีเนียร์ No ชื่อและสถานที่
1

en

ภาษาอังกฤษ
2

es

ภาษาสเปน
3

fr

ฝรั่งเศส
4

de

เยอรมัน
5

id

ชาวอินโดนีเซีย
6

it

อิตาลี
7

ja

ญี่ปุ่น
8

ko

เกาหลี
9

nl

ดัตช์
10

pt

โปรตุเกส
11

ru

รัสเซีย
12

th

ไทย
13

tr

ตุรกี
14

vi

เวียดนาม
15

zh-cn

ภาษาจีนประยุกต์
16

zh-tw

ภาษาจีนดั้งเดิม

ตอนนี้เราจะลองตัวอย่างหนึ่งเพื่อแสดงการนับถอยหลังโดยใช้ภาษาใดภาษาหนึ่งด้านบน

ตัวอย่าง

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

เอาต์พุต

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