@IT

CSS3 Countdown - Đếm ngược bằng CSS3/JavaScript

Thường thì người ta thường sử dụng đếm ngược cho ngày ra mắt sản phẩm, dịch vụ mới. Sau bao nhiều ngày, giờ, phút, giây nữa thì sản phẩm se ra mắt, việc này làm cho mọi người tò mò và ít nhiều thu hút được sự chú ý trong cộng đồng.
Về countdown thì có nhiều phương pháp, lần này mình sẽ giới thiệu phương pháp sử dụng CSS3 Countdown, sử dụng CSS3 kết hợp với JavaScript để cho ra kết quả khá đẹp.

Cách sử dụng CSS3 Countdown

Demo CSS3 Countdown. Hiển thị theo kiểu flip.

Đơn vị nhỏ nhất được đếm ngược bằng giây, đơn vị lớn nhất là ngày (không phải là năm).
Về coding thì tương tự như sau:

<div id="CDT"></div>
<script>
  // Set countdown limit
  var tl = new Date('2020/01/01 00:00:00');
  // You can add time's up message here
  var timer = new CountdownTimer('CDT',tl,'<span class="number-wrapper"><div class="line"></div><span class="number end">Time is up!</span></span>');
  timer.countDown();
</script>

CSS3 Countdown là chương trình viết bằng JavaScript/CSS3, mã nguồn được cung cấp không rõ giấy phép.

Liên kết:
CSS3 Countdown
sanographix/css3-countdown

Tags: css3 , javascript , oss