Google AMP - दिनांक उलटी गिनती

फिर भी एएमपी डेट काउंटडाउन नामक एक और amp घटक जिसका उपयोग किसी निश्चित तिथि तक दिन, घंटे, मिनट, सेकंड प्रदर्शित करने के लिए किया जाता है Y2K38 ( 2038)डिफ़ॉल्ट रूप से। प्रदर्शन अपनी पसंद के स्थानों के अनुसार किया जा सकता है; डिफ़ॉल्ट रूप से यह एन (अंग्रेजी) है। डेटा को रेंडर करने के लिए एएमपी-डेट-काउंटडाउन amp-मूंछ टेम्पलेट का उपयोग करता है।

इस अध्याय में, हम अधिक विवरण में 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>

Amp-मूंछ के लिए

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

एम्पी-डेट-काउंटडाउन के लिए विशेषताएँ

एम्पी-डेट-काउंटडाउन की विशेषताएं यहां तालिका में सूचीबद्ध हैं -

अनु क्रमांक विशेषता और विवरण
1

end-date

एक आईएसओ स्वरूपित करने के लिए नीचे की तारीख। उदाहरण के लिए, 2025-08-01T00: 00: 00 + 08: 00
2

timestamp-ms

मिलीसेकंड में एक POSIX युग का मूल्य; यूटीसी टाइमजोन माना जाता है। उदाहरण के लिए, टाइमस्टैम्प-एमएस = "1521880470000"
3

timestamp-seconds

सेकंड में एक POSIX युग मूल्य; यूटीसी टाइमजोन माना जाता है। उदाहरण के लिए, टाइमस्टैम्प-सेकंड = "1521880470"
4

timeleft-ms

मिलीसेकंड में एक मान जो नीचे गिना जा रहा है। उदाहरण के लिए, 50 घंटे के टाइमलेफ्ट-एमएस = "180,000,000"
5

offset-seconds (optional)

एक सकारात्मक या नकारात्मक संख्या जो दी गई समाप्ति तिथि से सेकंड की संख्या को जोड़ा या घटाया जाने का संकेत देती है। उदाहरण के लिए, ऑफसेट-सेकंड = "60" अंतिम-तिथि में 60 सेकंड जोड़ता है
6

when-ended (optional)

निर्दिष्ट करता है कि 0 सेकंड तक पहुंचने पर टाइमर को रोकना है या नहीं। मान को 0 सेकंड पर रोकने के लिए टाइमर को इंगित करने के लिए (डिफ़ॉल्ट) सेट करने के लिए सेट किया जा सकता है और अंतिम तिथि पास नहीं होगी या इंगित करना जारी रहेगा टाइमर 0 सेकंड तक पहुंचने के बाद जारी रखना चाहिए।
7

locale (optional)

प्रत्येक टाइमर इकाई के लिए एक अंतर्राष्ट्रीयकरण भाषा स्ट्रिंग। डिफ़ॉल्ट मान एन (अंग्रेजी के लिए) है। समर्थित मान नीचे सूचीबद्ध हैं।

प्रारूप

काउंटडाउन प्रदर्शित करने के लिए amp- तारीख-उलटी गिनती का उपयोग करने वाले प्रारूप निम्नलिखित तालिका में दिए गए हैं -

अनु क्रमांक प्रारूप और विवरण
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… .इनफिनिटी के रूप में
7

s

0,1,2,3 के रूप में दूसरा प्रदर्शित करें ... अनंत
8

ss

दूसरे को 00,01,02,03… .इनफिनिटी के रूप में प्रदर्शित करें
9

days

स्थान के अनुसार दिन या दिन स्ट्रिंग प्रदर्शित करें
10

hours

स्थान के अनुसार घंटे या घंटे का स्ट्रिंग प्रदर्शित करें
1 1

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 विशेषताएँ ऑफसेट-सेकंड को समझें -

<!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 द्वारा समर्थित है -

अनु क्रमांक नाम और स्थान
1

en

अंग्रेज़ी
2

es

स्पेनिश
3

fr

फ्रेंच
4

de

जर्मन
5

id

इन्डोनेशियाई
6

it

इतालवी
7

ja

जापानी
8

ko

कोरियाई
9

nl

डच
10

pt

पुर्तगाली
1 1

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