Bộ đếm ngược được dùng khắp Internet bởi những người muốn đếm ngược đến sự kiện lớn.
Bạn có thể dùng bộ đếm ngược đếm ngược đến ngày ra mắt trang web mới. Bộ đếm ngược có thể đánh dấu khi bạn sẽ công bố sản phẩm. Có rất nhiều khả năng để khám phá.
Trong hướng dẫn này, chúng ta sẽ chỉ cách tạo bộ đếm ngược trong JavaScript dùng ba công nghệ: HTML, CSS và JavaScript. Hãy bắt đầu!
Thiết lập trang web
Bước đầu thiết lập trang web cơ bản. Hướng dẫn này không dùng thư viện bên ngoài. Chúng ta giữ đơn giản dùng HTML, CSS và JavaScript thuần túy.
Hãy tạo file HTML:
<!DOCTYPE html> <html> <script> // Chúng ta sẽ lưu mã JavaScript ở đây </script> <style> // Chúng ta sẽ viết CSS ở đây </style> <body> <h1>Sắp đến giờ…</h1> <div id="timer"></div> </body> </html>
Mã không trả về gì đặc biệt ngay bây giờ, xem bên dưới:
Hiện ra như vậy vì chưa thêm kiểu dáng hoặc tạo bộ đếm JavaScript. Chuyển sang tạo JavaScript cho bộ đếm.
Tạo bộ đếm
JavaScript có đối tượng tiện lợi gọi là Date để làm việc với ngày và giờ. Chúng ta dùng đối tượng này cho hai mục đích: lấy dấu thời gian của thời điểm muốn đếm ngược, và lấy ngày hiện tại.
Trong hướng dẫn này, viết tất cả script trong thẻ <script></script>. Không dùng script bên ngoài.
Trừ ngày muốn đếm ngược từ ngày hiện tại cho hiệu giữa hai ngày:
var timeLeft = +new Date("2021-05-04") - +new Date();
Mã tính còn bao nhiêu ngày đến ngày Star Wars tiếp theo, là 4 tháng 5, 2021.
Mặc dù biết hiệu giữa hai ngày, có vài vấn đề. Thứ nhất, chưa có bộ đếm thực sự đếm ngược. Thứ hai, ngày không lưu ở định dạng dễ đọc bởi con người. Lưu ở mili giây, không tiện. Cần chuyển thời gian thành ngày, giờ, phút.
Để tính thời gian còn lại định dạng dễ đọc, dùng mã sau:
var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24); var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);
Chúng ta định dạng giá trị thành chuỗi bằng mã:
const timeLeftText = `${daysLeft} ngày ${hoursLeft} giờ ${minutesLeft} phút.`;
Trong mã này, dùng nội suy chuỗi thay thế giá trị tính trước. Cho dấu thời gian như: 314 ngày 13 giờ 52 phút.
Bây giờ đã tạo dấu thời gian, đặt lên trang web:
document.getElementById("timer").innerHTML = timeLeftText;
Chuyển tất cả mã vào hàm:
function countdown() { var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24); var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60); const timeLeftText = `${daysLeft} ngày ${hoursLeft} giờ ${minutesLeft} phút.`; document.getElementById("timer").innerHTML = timeLeftText; } countdown();
Khi tải trang, sau đây trả về:
Bây giờ có bộ đếm. Xong rồi à? Không; đừng vội. Nếu chờ một phút, bạn thấy bộ đếm không thực sự đếm ngược. Đó là vì cần nói cho trình duyệt cập nhật mỗi phút. Làm bằng mã:
setInterval(countdown, 60000);
Mã này thêm sau khi khai báo countdown(). Sẽ làm mới trang mỗi 60.000 mili giây. Tương đương mỗi 60 giây.
Bây giờ khi cập nhật mã bạn thấy nó thay đổi mỗi phút!
Thêm kiểu dáng
Bộ đếm có thể hoạt động, nhưng không thẩm mỹ. Hãy tạo vài kiểu dáng làm trang đẹp hơn:
<style> body { padding-top: 20%; height: 100vh; background: linear-gradient(to bottom right, #CAA89C, #434EFC); } h1, p { text-align: center; color: white; } </style>
Trang web hiện trông như sau:
Như thấy, trang hiện có nền gradient, văn bản căn giữa và chữ trắng. Trông tuyệt!
Kết luận
Bộ đếm ngược là tính năng quan trọng của nhiều trang. Bạn thấy bộ đếm trên cả trang cá nhân và chuyên nghiệp. Blog cá nhân có thể có bộ đếm đến ngày cưới. Trang công ty có bộ đếm đến ngày ra mắt sản phẩm.
Bây giờ bạn đã sẵn sàng tạo bộ đếm ngược JavaScript riêng như chuyên gia!