luxury watch replicas are designed for world travelers.

Đồng hồ đếm ngược – Countdown Timer được sử dụng khá phổ biến hiện nay. Dùng để mô tả đếm ngược thời gian Grand Open hay ra mắt một website, sự kiện hay sản phẩm. Đồng hồ đếm ngược còn được các website thương mai điện tử như Shopee, Lazada áp dụng cho các khung giờ flash sale. Các website chèn vào sản phẩm hiện thị thời gian khuyến mãi còn được áp dụng.

Trước đây các đồng hồ đếm ngược được dùng bằng các thư viện javascript khá nặng, có nhược điểm là hay bị reset lại thời gian khi người dùng tải lại trang. không thể chèn nhiều hơn 1 đồ hồ đếm ngược trên trang. Ngoài ra có thể bị ảnh hướng nếu website của bạn có sử dụng cache.

Khắc phục những nhược điểm trên, mình xin chia sẻ code đồng hồ đếm ngược được dùng bằng html5 và jQuery. có thể chèn được tùy ý bao nhiêu cũng được. đặt biệt rất nhẹ không tốn tài nguyên của website.
Trước tiên, các bạn tải thư viện countdown.js sau về máy.

Countdown Timer

Để sử dụng thư viện này tạo ra đồng hồ đếm ngược. Chúng ta sẽ dùng thuộc tính data-*. data-* đây là thuộc tính mới xuất hiện từ html5. Thuộc tính data-* được dùng để lưu trữ dữ liệu, hoặc nhúng các dữ liệu tùy chỉnh trong html. Dữ liệu được lưu trữ có thể được sử dụng trong javascript hoặc jQuery để tạo ra trải nghiệm người dùng hấp dẫn hơn. Không cần phải gọi hoặc truy vấn dữ liệu từ máy chủ nào.

Thuộc tính data-* gồm 2 thành phần:

• Tên thuộc tính không chứa bất kỳ chữa cái IN HOA nào và phải có ít nhất 1 ký tự sau tiền tố “data-“.
• Giá trị của thuộc tính có thể là bất kỳ chuỗi nào

Dưới đây là phần code tạo đồng hồ đếm ngược:

<div countdown="" data-date="December 21 2018 10:10:10">
   Chỉ còn: <span data-days="">00</span> ngày 
            <span data-hours="">00</span> giờ 
            <span data-minutes="">00</span> phút 
            <span data-seconds="">00</span> giây
</div>

data-date, data-days, data-hours, data-minutes, data-seconds là các thuộc tính data-*. Các thuộc tính đã được định nghĩa trong thư viện countdown.js

Kết

Vậy là đã xong. Chúng ta đã tạo được đoạn code Countdown Timer đơn giản, gọn nhẹ. Bật mí với các bạn hiện nay rất nhiều website thương mại điện tử lớn đang dùng chính đoạn code này để áp dụng cho các chương trình khuyến mãi.

Hi vọng bài viết này có ích cho các bạn. Nếu có thắc mắc gì vui lòng comment bên dưới để mình biết và chia sẻ với nhau.