jQuery Countdown.js Examples
Đồng hồ đếm ngược thời gian có nhiều cách sử dụng trên web, cách sử dụng phổ biến nhất mà bạn sẽ tìm thấy trên các trang web.
2
3
hours
5
9
minutes
5
9
seconds
0
0
hours
0
0
minutes
0
0
seconds
0
0
hours
0
0
minutes
0
0
seconds
0
0
hours
:
0
0
minutes
:
0
0
seconds
1
days
,
0
0
hours
:
0
0
minutes
:
0
0
seconds
1
days
,
0
0
hours
:
0
0
minutes
:
0
0
seconds
0
0
hours
:
0
0
minutes
:
0
0
seconds
0
0
hours
:
0
0
minutes
:
0
0
seconds
HTML▼
<div id="content"> <h1 style="margin-top:10px; color:#0000ff;">jQuery Countdown.js Examples</h1> <!-- Valid global date and time string --> <div><time>24:00:00</time></div><!-- Paris (winter) --> <div><time>2024-02-10 00:00:00</time></div><!-- California --> <div><time>2030-02-01 00:00:00</time></div><!-- UTC --> <!-- Human readable duration --> <h1 class="alt-1">2024-02-10 00:00:00</h1> <h1 class="alt-1">24:00:00</h1> <!-- Valid time string --> <div class="alt-2">24:00:00</div> <!-- Valid duration string --> <div class="alt-2">2024-02-10 00:00:00</div> <!-- Python datetime.timedelta str output --> <!-- print datetime.timedelta(days=600, hours=3, minutes=59, seconds=12) --> <div class="alt-2">2030-02-01 00:00:00</div> </div>
CSS ▼
<style> body { background: #eee; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; } #content { width: 90%; margin: 0 auto 100px auto; } /* COUNTDOWN - Inspiration http://fff.cmiscm.com/#!/section/flipclock */ /* ----------------------------------------------------------------------------------------- */ .countdown { display: table-cell; font-weight: normal; } .countdown .item { display: inline-block; vertical-align: bottom; position: relative; font-family: 'Open Sans', cursive; font-weight: 700; font-size: 30px; line-height: 90px; text-align: center; color: #B7B7B7; border-radius: 10px; margin: 50px 10px 50px 0; padding: 0 10px; background: #2A2A2A; background: -webkit-linear-gradient(#2A2A2A, #000); background: linear-gradient(#2A2A2A, #000); overflow: hidden; } .countdown .item-ss { font-size: 30px; line-height: 90px; } .countdown .item:after { content: ''; display: block; height: 1px; border-top: 3px solid #111; width: 24%; position: absolute; top: 50%; left: 0; } .countdown .label { text-transform: uppercase; display: block; position: absolute; font-family: 'Open Sans', cursive; font-weight: 700; line-height: normal; right: 6px; bottom: 4px; font-size: 14px; color: #B9B9B9; } .countdown .item-hh .label, .countdown .item-mm .label, .countdown .item-ss .label { display: none; } /* COUNTDOWN-ALT-1 */ /* ----------------------------------------------------------------------------------------- */ .countdown-alt-1 { display: block; font-size: 0; /* Hack for inline and inline-block extra markup generated spaces */ margin: 10px 0; color: #000; } .countdown-alt-1 .item { position: relative; } .countdown-alt-1 .dd, .countdown-alt-1 .hh-1, .countdown-alt-1 .hh-2, .countdown-alt-1 .mm-1, .countdown-alt-1 .mm-2, .countdown-alt-1 .ss-1, .countdown-alt-1 .ss-2 { font-family: 'Righteous', cursive; background: #F6F6F6; border-radius: 10px; display: inline-block; font-size: 30px; margin: 1px 2px; min-width: 40px; padding: 5px 16px; text-align: center; } .countdown-alt-1 .hh-1, .countdown-alt-1 .hh-2, .countdown-alt-1 .mm-1, .countdown-alt-1 .mm-2, .countdown-alt-1 .ss-1, .countdown-alt-1 .ss-2 { width: 40px; max-width: 40px; } .countdown-alt-1 .label { font-style: italic; text-transform: capitalize; background: #F6F6F6; border-radius: 5px; font-size: 12px; margin: 1px 2px; padding: 2px 5px; position: absolute; left: 0; bottom: -44px; } .countdown-alt-1 .separator-dd, .countdown-alt-1 .separator { color: #FFF; font-size: 40px; position: relative; } /* COUNTDOWN-ALT-2 - Inspiration http://goo.gl/hRfsc */ /* ----------------------------------------------------------------------------------------- */ .countdown-alt-2 { font-size: 0; /* Hack for inline and inline-block extra markup generated spaces */ display: block; overflow: auto; padding: 20px 0; margin: 10px 0; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; color: #333; -webkit-transform: skew(-2deg, -2deg); transform: skew(-2deg, -2deg); } .countdown-alt-2 .item { display: block; float: left; position: relative; font-size: 25px; font-weight: bold; padding: 26px 20px 10px 20px; margin: 0 10px; min-width: 40px; max-width: 30px; text-align: center; background: #FFF; border: 2px solid #FFF; box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, 0.2); } .countdown-alt-2 .dd, .countdown-alt-2 .hh-1, .countdown-alt-2 .hh-2, .countdown-alt-2 .mm-1, .countdown-alt-2 .mm-2, .countdown-alt-2 .ss-1, .countdown-alt-2 .ss-2 { font: italic; text-shadow: 1px 1px 10px #FFF, 1px 1px 3px #333; } .countdown-alt-2 .label { font-weight: normal; position: absolute; top: 0; left: 0; font-size: 10px; width: 60px; padding: 5px 10px; background: #0B81BC; color: #FFF; }</style>
JS ▼
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://dat0007.sextgem.com/demnguoc/jQuery%20Countdown.js%20Examples/jquery.countdown.js"></script> <script> window.jQuery(function ($) { "use strict"; $('time').countDown({ with_separators: false }); $('.alt-1').countDown({ css_class: 'countdown-alt-1' }); $('.alt-2').countDown({ css_class: 'countdown-alt-2' }); }); </script>
▼
Chạm vào code Copy
Log in