Chào các bạn! Cũng đã lâu lắm rồi mình chưa đăng bài nào trên website cả do nhiều việc quá, chỉ còn vài ngày nữa là đến Tết Nguyên đán Tân Sửu 2021 rồi. Do đó, để tân trang lại cho blog của mình với website của các bạn (nếu các bạn có :3) thì bài viết này mình sẽ giới thiệu và chia sẻ code đồng hồ đếm ngược (countdown timer) nhé!
Đồng hồ đếm ngược (countdown timer) là gì?
Ừ thì cái tên của nó đã nói lên tất cả rồi, đồng hồ đếm ngược (hay countdown timer) là ứng dụng dùng để tính toán và hiện ra màn hình thời gian còn lại tính từ ngày hôm nay đến một ngày xác định là còn bao nhiêu ngày, giờ, phút, giây.
Một số website có sử dụng countdown timer để trang trí blog như Sharengay.com,…
Ví dụ về countdown timer trên blog Sharengay.com (phần viền đỏ)
Ứng dụng này được viết ở rất nhiều ngôn ngữ lập trình web khác nhau như PHP, Javascript,… Nhưng mình thấy phổ biến nhất vẫn là Javascript vì nó là ngôn ngữ lập trình giúp website của chúng ta thêm trực quan, thời gian thực.
Riêng trong bài này mình sẽ chia sẻ với bạn ứng dụng này được viết bằng Javascript thuần, bạn có thể import vào bất kỳ nơi đâu của website (nhưng tốt nhất là đặt ở cuối nhé!). Và hãy để lại nguồn từ website của mình trong mã nguồn nhé, cám ơn bạn rất nhiều ^_^
Chức năng của Đồng hồ đếm ngược (countdown timer) TMV-countdown
Đối với TMV-countdown, chương trình này có thể:
- Tính toán thời gian còn lại (countdown) chính xác
- Thực thi với tốc độ rất cao do dùng 100% Javascript thuần
- Thêm, xoá, chỉnh sửa chi tiết ngày lễ của năm (định dạng MM-DD)
- Thêm, xoá, chỉnh sửa chi tiết mô tả về ngày lễ đã thêm (ví dụ 03/02 là ngày thành lập Đảng Cộng sản Việt Nam)
- Đặc biệt, nếu một số ngày lễ thay đổi liên tục qua từng năm thì chương trình sẽ ưu tiên tính toán ngày lễ đó mà tắt ngày lễ đã khai báo mặc định.
- Code trực quan, dễ chỉnh sửa, dễ bảo trì, có comment từng vị trí để giải thích tác dụng của code
- Tự do chỉnh sửa code nhưng cần ghi nguồn tác giả (là mình đấy :v) theo giấy phép GNU v3
Hướng dẫn cài đặt và sử dụng code đồng hồ đếm ngược (countdown timer) cho website
Để có thể cài đặt và sử dụng code countdown timer cho website, bạn tải về 1 trong 2 file sau:
Sau đó, bạn mở file đã tải về bằng Notepad hoặc bất kỳ trình chỉnh sửa văn bản (text editor hoặc code editor nào) rồi copy toàn bộ nội dung trong đó.
Tiếp tục, bạn paste đoạn code đó tại bất kỳ vị trí nào của website mà bạn mong muốn là xong rồi đó! Ví dụ WordPress sẽ có mục Widget, bạn paste đoạn code đó vào mục HTML tuỳ chỉnh (Custom HTML) rồi nhấn Finish (nhớ xoá cache nếu website của bạn dùng plugin cache nhé).
Bạn mở website lên, sau đó bạn thấy tương tự như hình bên dưới là đã thành công rồi đó:
Đồng hồ đếm ngược (countdown timer) trên website tienminhvy.com
Bạn có thể tuỳ biến thêm CSS vào để trang trí phần thẻ h3 và thẻ p đấy nhé!
Giải thích một số tính năng của code đồng hồ đếm ngược TMV-countdown (countdown timer)
Cơ chế làm việc của TMV-countdown
Đầu tiên, code sẽ lấy giá trị của mảng dsngaytt (lưu trữ danh sách ngày theo định dạng MM-DD) và dsngay_mota, sau đó tự động thêm năm hiện tại đang thực thi đoạn code này (ví dụ như năm nay – 2021) vào từng ngày của danh sách và lưu vào biến dsngay.
Sau đó, code sẽ kiểm tra ngày hiện tại với ngày của danh sách. Nếu ngày hiện tại trùng với ngày đã được khai báo trong danh sách thì thông báo hiện tại là ngày lễ. Nếu không thì code sẽ dò từng ngày trong danh sách, xem ngày nào trừ cho ngày hiện tại lớn hơn 0 (danh sách ngày sắp xếp theo trật tự từ đầu đến cuối năm) thì bắt đầu đếm ngược khi nào sẽ đến ngày đó, chỉ đơn giản vậy thôi :v
// Chỉ cho count đến dsngaydbtt (Danh sách ngày đặc biệt)?
Code đồng hồ đếm ngược (countdown timer)
Tại đây, mặc định mình có thêm một số ngày lễ để cho code tự đếm ngược, tuy nhiên, nếu bạn muốn thêm một số ngày lễ không cố định (ví dụ như mồng 1 Tết Nguyên đán, giỗ tổ mồng 10-3 ở lịch dương) thì sao? Đơn giản là bạn chỉ cần thêm, chỉnh sửa dsngaydbtt và dsngaydb_mota, sau đó cho biến specialOnly = true là xong, còn nếu bạn không muốn sử dụng nó thì cho biến specialOnly = false thôi.
Ngoài ra, toàn bộ chức năng của từng phần trong code mình đã giải thích trong file 1 (có chứa comment) hết rồi đó. Nếu bạn muốn chỉnh sửa nâng cao thì cứ mở file đó ra rồi bắt đầu chỉnh lại theo ý muốn :3
Tóm lại
Qua bài viết này, mình đã chia sẻ code đồng hồ đếm ngược TMV-countdown (countdown timer) cũng như hướng dẫn cách cài đặt chi tiết cho website rồi đó. Nếu bạn có thắc mắc hay cần trợ giúp, đừng ngần ngại mà hãy đăng bình luận trực tiếp ở phía dưới nhé!
Cám ơn bạn đã đọc bài viết ^_^
![[Bài 11] Video trong HTML5](https://i0.wp.com/tienminhvy.com/wp-content/uploads/2021/03/html5-2.png?resize=370%2C210&ssl=1 "[Bài 11] Video trong HTML5")
){kind=link}