Tạo đồng hồ đếm ngược nhúng vào website: mã nhúng, bẫy múi giờ và ba chỗ cần chỉnh tay
Công cụ tạo một đồng hồ đếm ngược tới mốc thời gian bạn chọn, xem thử ngay trên trang rồi xuất ra đoạn mã HTML kèm JavaScript để dán thẳng vào website. Mã sinh ra là mã thuần, không phụ thuộc thư viện bên ngoài nên chạy được ở mọi nơi cho phép chèn HTML.
Tính năng nổi bật
- Đặt tiêu đề riêng cho đồng hồ, tiêu đề này đi luôn vào mã nhúng
- Chọn mốc thời gian đích tới từng phút bằng ô chọn ngày giờ
- Xem thử trực tiếp trên trang với bốn ô ngày, giờ, phút, giây cập nhật mỗi giây
- Sinh mã nhúng gồm cả phần HTML và phần JavaScript trong một khối
- Mã thuần không dùng thư viện ngoài nên không phải tải thêm tệp nào
- Kiểu dáng viết sẵn bằng thuộc tính style nội tuyến nên không phụ thuộc CSS của trang đích
- Sao chép toàn bộ mã nhúng bằng một lần bấm
- Chạy hoàn toàn trên trình duyệt, không cần đăng ký hay tạo tài khoản
Đồng hồ đếm ngược làm gì cho trang của bạn
Một mốc thời gian viết bằng chữ thì người đọc phải tự tính còn bao lâu, còn một đồng hồ chạy thì con số tự nói. Khác biệt nghe nhỏ nhưng ảnh hưởng thật tới hành vi: khi người xem thấy còn 2 ngày 6 giờ, họ ra quyết định ngay tại chỗ thay vì để lại tính sau rồi quên. Vì thế đồng hồ đếm ngược hợp với những trang có một mốc thật sự tồn tại: ngày mở bán vé, hạn đăng ký hội thảo, giờ phát trực tiếp, ngày kết thúc chương trình giảm giá, ngày ra mắt sản phẩm, hoặc trang thông báo bảo trì hệ thống. Điểm mấu chốt là mốc phải có thật và phải đúng. Đồng hồ đặt lại về 24 giờ mỗi khi người dùng tải lại trang không tạo ra cảm giác khẩn cấp mà tạo ra sự mất niềm tin, và với người quay lại lần thứ hai thì nó phá hỏng luôn ấn tượng về cả thương hiệu.
Lợi ích khi sử dụng
- Có mã chạy được ngay, không phải thuê lập trình cho một việc nhỏ
- Không phụ thuộc dịch vụ bên thứ ba nên đồng hồ không biến mất khi dịch vụ đó đóng cửa
- Không tải thêm thư viện nào nên gần như không ảnh hưởng tốc độ trang
- Kiểu dáng viết nội tuyến nên không xung đột với CSS sẵn có của trang
- Xem thử ngay trước khi nhúng nên phát hiện sai mốc thời gian sớm
Cách tạo và nhúng đồng hồ đếm ngược
- 1Nhập tiêu đề sẽ hiện phía trên bốn ô số, ví dụ tên chương trình hoặc tên sự kiện.
- 2Chọn ngày và giờ đích; hãy nhập theo giờ Việt Nam vì đây là giờ mà bạn và phần lớn người xem đang dùng.
- 3Bấm bắt đầu để xem thử đồng hồ chạy thật, kiểm tra số ngày còn lại có khớp với dự tính không.
- 4Cuộn xuống khối mã nhúng và bấm sao chép để lấy toàn bộ đoạn mã.
- 5Dán vào một khối HTML tùy chỉnh trên website của bạn, sau đó mở trang ở chế độ khách để xác nhận đồng hồ chạy đúng.
Bẫy lớn nhất: múi giờ của người xem, không phải của bạn
Trong đoạn mã nhúng, mốc thời gian được ghi dưới dạng chuỗi kiểu năm gạch tháng gạch ngày, chữ T, rồi giờ và phút, và chuỗi này không mang thông tin múi giờ. Quy tắc của JavaScript với chuỗi ngày giờ đầy đủ mà không có phần đuôi múi giờ là hiểu nó theo giờ của chính máy người đang xem. Hệ quả rất cụ thể: bạn đặt mốc 20 giờ ngày 30 tháng 9 theo giờ Việt Nam, nhưng một người xem ở Nhật sẽ thấy đồng hồ đếm tới 20 giờ theo giờ Nhật, tức sớm hơn hai tiếng so với ý bạn; người xem ở Đức thì thấy muộn hơn năm tiếng. Với chương trình chỉ phục vụ khách trong nước thì hầu như không thành vấn đề, nhưng với sự kiện trực tuyến, buổi phát trực tiếp hay hạn nộp bài có người tham gia ở nhiều nước, đây là lỗi gây hậu quả thật. Cách sửa mất năm giây: trong đoạn mã vừa sao chép, tìm chuỗi ngày giờ trong dòng lệnh khởi tạo rồi thêm phần đuôi độ lệch múi giờ Việt Nam vào ngay sau phút, tức thêm dấu cộng, số 07, dấu hai chấm và hai số 0. Khi đó mọi trình duyệt trên thế giới đều đếm về cùng một thời điểm tuyệt đối.
Ba chỗ nên chỉnh tay trong mã nhúng trước khi dùng thật
Chỗ thứ nhất là số 0 đứng đầu. Phần xem thử trên trang này hiển thị 05 giờ, nhưng đoạn mã nhúng ghi thẳng kết quả phép chia nên trên website của bạn nó sẽ hiện 5. Bốn ô số vì thế co giãn theo độ dài chữ số và cả khối bị nhảy mỗi khi số chuyển từ 10 xuống 9. Muốn giống bản xem thử, hãy bọc mỗi giá trị bằng lời gọi hàm đệm chuỗi về hai ký tự bằng số 0. Chỗ thứ hai là xử lý khi hết giờ. Mã hiện tại chỉ dừng cập nhật khi qua mốc, nên đồng hồ đóng băng ở giá trị cuối, còn người mở trang sau đó sẽ thấy toàn số 00 mà không hiểu chuyện gì. Hãy thay câu lệnh dừng bằng đoạn thay nội dung cả khối thành một dòng thông báo, ví dụ chương trình đã kết thúc hoặc sự kiện đang diễn ra. Chỗ thứ ba là mã định danh phần tử: bốn ô số dùng bốn mã cố định, nên nếu bạn đặt hai đồng hồ trên cùng một trang thì cả hai đoạn mã sẽ cùng ghi vào một bộ ô và bạn chỉ thấy một đồng hồ chạy. Khi cần nhiều đồng hồ, hãy đổi bốn mã định danh trong cả phần HTML lẫn phần JavaScript của bản thứ hai.
Nhúng vào từng nền tảng và vì sao đoạn mã bị mất
Đoạn mã gồm hai phần: khối HTML hiển thị và thẻ script làm đồng hồ chạy. Nhiều nền tảng lọc bỏ thẻ script vì lý do bảo mật, và đó là nguyên nhân số một khiến người dùng dán mã vào rồi chỉ thấy bốn số 00 nằm im. Với WordPress, hãy dùng khối HTML tùy chỉnh trong trình soạn thảo khối, đừng dán vào khối đoạn văn vì trình soạn thảo sẽ thoát ký tự và biến mã thành chữ; ngoài ra tài khoản không có quyền chỉnh sửa mã nguồn cũng bị lọc thẻ script. Với các nền tảng dựng trang kéo thả, hãy tìm thành phần có tên nhúng mã hoặc HTML tùy chỉnh, và lưu ý một số gói dịch vụ ở mức thấp không cho phép chèn script. Với website tự viết bằng HTML thuần thì dán thẳng vào vị trí mong muốn là chạy. Với Shopify hoặc các nền tảng thương mại điện tử, chèn qua phần chỉnh sửa mã của chủ đề hoặc qua thành phần HTML tùy chỉnh. Nếu nền tảng của bạn không cho chèn script bằng bất kỳ cách nào, phương án còn lại là dựng đồng hồ trên một trang riêng rồi nhúng trang đó bằng khung nội tuyến.
Dùng đếm ngược trong tiếp thị mà không đánh mất niềm tin
Đồng hồ đếm ngược hoạt động vì nó khai thác cảm giác sợ bỏ lỡ, và chính vì thế nó rất dễ bị lạm dụng. Ba kiểu lạm dụng thường gặp: đồng hồ tự đặt lại về mốc cũ mỗi khi người dùng tải lại trang hoặc mở bằng cửa sổ ẩn danh; đồng hồ hết giờ nhưng chương trình vẫn chạy tiếp và hôm sau lại có đồng hồ mới với cùng nội dung; đồng hồ gắn với một mốc không có thật, kiểu chỉ còn hai giờ để nhận ưu đãi trong khi giá không bao giờ đổi. Người mua hàng trực tuyến hiện nay nhận ra những trò này rất nhanh, và cái giá phải trả không chỉ là mất một đơn hàng mà là mất niềm tin vào toàn bộ thông tin còn lại trên trang. Ngoài ra, quy định về khuyến mại yêu cầu thương nhân công bố và thực hiện đúng thời gian đã công bố, nên việc kéo dài vô tận một chương trình gắn hạn chót cũng là rủi ro pháp lý chứ không chỉ là vấn đề đạo đức. Cách dùng bền vững rất đơn giản: chỉ đặt đồng hồ cho những mốc có thật, và khi hết giờ thì thật sự kết thúc, kèm một dòng thông báo rõ ràng thay cho bốn ô số.
Hiệu năng, độ chính xác và khả năng tiếp cận
Về độ chính xác, đồng hồ chạy bằng một bộ hẹn giờ lặp mỗi giây, và trình duyệt sẽ giảm tần suất chạy khi tab ở chế độ nền để tiết kiệm pin. Điểm may mắn là mã tính lại khoảng cách từ thời điểm hiện tại tới mốc đích ở mỗi lần chạy chứ không cộng dồn, nên khi người dùng quay lại tab thì con số tự nhảy về đúng, không bị tích lũy sai lệch. Về hiệu năng, đoạn mã rất nhẹ vì không tải thư viện nào, nhưng nếu bạn chèn nó vào giữa nội dung thì khối đồng hồ sẽ đẩy phần bên dưới xuống khi trang dựng xong, gây hiện tượng nhảy bố cục vốn là một trong các chỉ số trải nghiệm mà công cụ tìm kiếm đo. Cách phòng là đặt sẵn chiều cao tối thiểu cho vùng chứa đồng hồ. Về khả năng tiếp cận, bốn con số đổi liên tục là ác mộng với trình đọc màn hình nếu bạn khai báo vùng thông báo động, nên tốt nhất là để mặc định không thông báo và bổ sung một dòng chữ ghi rõ mốc thời gian đầy đủ ngay bên cạnh đồng hồ. Dòng chữ đó cũng có ích cho mọi người dùng khác, vì nó cho biết chính xác là ngày nào chứ không chỉ còn bao lâu.
Câu hỏi thường gặp (FAQ)
Dán mã vào website rồi mà đồng hồ đứng im ở 00, vì sao?
Gần như chắc chắn nền tảng của bạn đã lọc bỏ thẻ script trong đoạn mã. Hãy dán vào đúng thành phần dành cho HTML tùy chỉnh chứ không phải khối văn bản thường, và kiểm tra tài khoản của bạn có quyền chèn mã hay không, vì nhiều nền tảng chỉ cho phép ở các gói dịch vụ cao hơn.
Người xem ở nước ngoài thấy đồng hồ đếm sai giờ, sửa thế nào?
Vì chuỗi ngày giờ trong mã không mang múi giờ nên trình duyệt hiểu theo giờ máy người xem. Hãy mở đoạn mã, tìm chuỗi ngày giờ rồi thêm phần đuôi độ lệch múi giờ Việt Nam ngay sau phút, tức thêm dấu cộng, số 07, dấu hai chấm và hai số 0. Khi đó mọi nơi đều đếm về cùng một thời điểm.
Vì sao trên website số không có số 0 đứng đầu như bản xem thử?
Vì bản xem thử trên trang này có bước đệm chuỗi về hai ký tự, còn đoạn mã nhúng ghi thẳng kết quả phép chia. Muốn giống nhau, hãy bọc mỗi giá trị trong mã nhúng bằng lời gọi hàm đệm chuỗi về hai ký tự bằng số 0, cách này cũng giúp bốn ô số không bị nhảy chiều rộng.
Khi hết giờ thì đồng hồ hiển thị gì?
Mã hiện tại chỉ dừng cập nhật nên đồng hồ đóng băng ở giá trị cuối, còn người mở trang sau thời điểm đó sẽ thấy toàn số 00. Bạn nên sửa đoạn xử lý hết giờ để thay nội dung cả khối bằng một dòng thông báo rõ ràng, ví dụ chương trình đã kết thúc.
Đặt hai đồng hồ trên cùng một trang được không?
Được nhưng phải sửa mã. Bốn ô số dùng bốn mã định danh cố định, nên hai đoạn mã sẽ cùng ghi vào một bộ ô và chỉ một đồng hồ chạy. Hãy đổi cả bốn mã định danh trong phần HTML lẫn phần JavaScript của bản thứ hai, ví dụ thêm hậu tố số 2 vào mỗi mã.
Đồng hồ có chạy sai khi tôi chuyển sang tab khác không?
Không sai. Trình duyệt giảm tần suất chạy bộ hẹn giờ ở tab nền nên đồng hồ có thể ngừng cập nhật hình ảnh, nhưng mã tính lại khoảng cách từ thời điểm hiện tại tới mốc đích ở mỗi lần chạy chứ không cộng dồn, nên khi quay lại tab con số tự nhảy về đúng.
Có đổi được màu sắc và kiểu dáng đồng hồ không?
Được. Toàn bộ kiểu dáng nằm trong thuộc tính style nội tuyến ngay trong đoạn mã, bạn sửa mã màu nền, màu chữ, cỡ chữ và bo góc trực tiếp ở đó. Vì là kiểu nội tuyến nên nó không bị CSS của trang đích ghi đè, đổi lại bạn phải sửa tay từng chỗ.
Đồng hồ có ảnh hưởng tốc độ tải trang không?
Gần như không, vì đoạn mã rất ngắn và không tải thư viện ngoài. Điều cần lưu ý hơn là hiện tượng nhảy bố cục khi khối đồng hồ được dựng ra và đẩy nội dung bên dưới xuống. Hãy đặt sẵn chiều cao tối thiểu cho vùng chứa đồng hồ để tránh việc này.
Có nên đặt đồng hồ tự đặt lại mỗi khi khách tải trang không?
Không nên. Khách quay lại lần thứ hai hoặc mở bằng cửa sổ ẩn danh sẽ nhận ra ngay, và cái mất không chỉ là một đơn hàng mà là niềm tin vào mọi thông tin khác trên trang. Ngoài ra quy định về khuyến mại yêu cầu thực hiện đúng thời gian đã công bố.
Đồng hồ đếm ngược có thân thiện với người dùng trình đọc màn hình không?
Bốn con số đổi liên tục rất khó chịu nếu bạn khai báo vùng thông báo động. Cách tốt là để mặc định không thông báo và bổ sung một dòng chữ ghi rõ mốc thời gian đầy đủ ngay bên cạnh đồng hồ. Dòng chữ đó cũng có ích cho mọi người dùng vì nó cho biết chính xác ngày giờ.
Mã nhúng có phụ thuộc website này không?
Không. Đoạn mã sinh ra là HTML và JavaScript thuần, tự chạy độc lập trên trang của bạn và không gọi về máy chủ nào. Nghĩa là đồng hồ vẫn hoạt động bình thường kể cả khi trang công cụ này ngừng hoạt động, khác với các dịch vụ nhúng bằng khung nội tuyến từ bên thứ ba.
Có tạo được đồng hồ đếm ngược theo giờ, phút thay vì theo ngày không?
Đồng hồ luôn hiện đủ bốn đơn vị ngày, giờ, phút, giây. Nếu mốc của bạn chỉ cách vài giờ và bạn muốn bỏ ô ngày, hãy xóa khối HTML của ô ngày rồi cộng phần ngày vào phép tính giờ, cụ thể là thay công thức tính giờ bằng phép chia tổng thời gian còn lại cho số mili giây của một giờ.
Từ khóa liên quan
- tạo đồng hồ đếm ngược online
- countdown timer cho website
- mã nhúng đếm ngược html
- đếm ngược sự kiện
- countdown generator
- đồng hồ đếm ngược khuyến mãi
- nhúng countdown vào wordpress
- code đếm ngược javascript
- đếm ngược ngày cưới
- đếm ngược tết
- đồng hồ đếm ngược ra mắt sản phẩm
- lỗi múi giờ countdown
- countdown bị sai giờ
- chèn script vào wordpress
- khối html tùy chỉnh
- đếm ngược livestream
- fomo trong bán hàng online
- nhảy bố cục cls
- đặt lại countdown khi tải trang
- công cụ tạo countdown miễn phí
