Cách dùng Trình tạo đồng hồ đếm ngược
- Chọn ngày và giờ kết thúc cùng múi giờ tương ứng — đồng hồ sẽ quy đổi để kết thúc đúng cùng một thời điểm với mọi khách truy cập.
- Chọn các đơn vị muốn hiển thị và nhập nhãn bằng ngôn ngữ của bạn.
- Quyết định điều gì xảy ra khi về 0: hiển thị thông báo, ẩn đồng hồ hoặc chuyển đến một trang.
- Chọn kiểu dáng và màu sắc, sau đó sao chép đoạn mã vào khối Embed (Webflow) hoặc Custom HTML (WordPress).
Một thời điểm chung cho mọi khách truy cập
Thời gian kết thúc được lưu dưới dạng một mốc UTC chính xác, tính từ ngày, giờ và múi giờ bạn chọn — bao gồm cả giờ tiết kiệm ánh sáng ban ngày của ngày đó. Khách ở Tokyo và khách ở New York sẽ thấy hai đồng hồ địa phương khác nhau, nhưng đồng hồ đếm ngược vẫn về 0 cùng một lúc.
Nhẹ và độc lập
Đoạn mã chỉ gồm vài dòng HTML, CSS và JavaScript, không cần thư viện. Kiểu dáng được giới hạn trong một class riêng biệt nên không xung đột với website của bạn. Đồng hồ cập nhật mỗi giây, dùng aria-live ở chế độ lịch sự để trình đọc màn hình không bị dồn dập, và tạm dừng khi tab bị ẩn. Bạn có thể đặt nhiều đồng hồ trên cùng một trang — hãy tạo một đoạn mã cho mỗi đồng hồ.
Chỉ nên đếm ngược đến các hạn chót có thật: những đồng hồ “evergreen” giả, tự đặt lại cho mỗi khách truy cập, sẽ gây hiểu lầm cho khách hàng và bị pháp luật bảo vệ người tiêu dùng nhiều nước cấm. Xem thêm: Chuyển đổi múi giờ, Chuyển đổi Unix Timestamp.
Cũng được tìm dưới tên: nhúng đồng hồ đếm ngược, đồng hồ đếm ngược cho website, countdown timer html, đồng hồ đếm ngược webflow, đếm ngược ra mắt sản phẩm, đồng hồ đếm ngược khuyến mãi, widget đếm ngược miễn phí.
Các công cụ dùng kèm tốt với Trình tạo đồng hồ đếm ngược
- Máy tính khoảng cách ngày — Đếm số ngày giữa hai ngày, bao gồm ngày làm việc và bảng chia theo năm/tháng/ngày.
- Tạo banner cookie — Thêm banner đồng ý cookie vào bất kỳ website nào — Webflow, WordPress, Shopify hay HTML thuần — mà không cần plugin trả phí.
- HTML & CSS sang Webflow — Dán HTML và CSS, nhấn Copy to Webflow rồi dán vào Designer.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.