Google AMP amp-date-countdown
The amp-data-countdown is used to count down to a specific date which is rendered to the AMP HTML page. It is specifically used as a timer or count-down.
Required Scripts: Adding the amp-data-countdown component.
HTML
<script async custom-element="amp-date-countdown" src=</script> |
Adding the amp-mustache component
HTML
<script async custom-template="amp-mustache" src=</script> |
Attributes:
- end-date: It is ISO formatted date to count down to.
- timeleft-ms: Millisecond value to count down to.
- offset-seconds: A number to be added to the end date. It could be positive or negative.
- biggest unit: This attribute could be set as days, hours, minutes, seconds (default : days). The unit bigger than the user defined unit is not shown. Eg if there are 2 days left and biggest unit is hours, it shows 48 hours left.
- locale: Sets the language for the timer display.
| English | en |
| German | de |
| Spanish | es |
| French | fr |
| Italian | it |
| Japanese | ja |
| Dutch | nl |
| Korean | ko |
| Russian | ru |
| Vietnamese | vi |
| Turkish | tr |
| Portuguese | pt |
| Thai | th |
| Chinese simplified /traditional | zh-cn/zh-tw |
Example:
HTML
<!doctype html><html amp> <head> <meta charset="utf-8"> <title>Google AMP amp-date-countdown</title> <!-- Include the `amp-date-countdown` component ... --> <script async custom-element= "amp-date-countdown" src= </script> <!-- Include the `amp-mustache` component ... --> <script async custom-template= "amp-mustache" src= </script> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="canonical" href= <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 src= </script> <style amp-custom> amp-date-countdown { display: block; } </style></head> <body> <amp-date-countdown timestamp-seconds="2147483648" locale="en" layout="fixed-height" height="100"> <template type="amp-mustache"> {{d}} {{days}}, {{h}} {{hours}}, {{m}} {{minutes}}, {{s}} {{seconds}} </template> </amp-date-countdown> <amp-date-countdown timestamp-seconds="2147483648" biggest-unit="minutes" layout="fixed-height" height="100"> <template type="amp-mustache"> {{m}} minutes and {{s}} seconds until <a href= Y2K38 </a> </template> </amp-date-countdown></body> </html> |
Output:
.png)