Đồng hồ đếm ngược được sử dụng trên khắp Internet bởi những người muốn đếm ngược đến một sự kiện lớn.
Bạn có thể sử dụng đồng hồ đếm ngược để đếm ngược đến ngày ra mắt trang web mới của mình. Đồng hồ đếm ngược có thể đánh dấu thời điểm bạn chuẩn bị công bố sản phẩm. Có rất nhiều khả năng để bạn khám phá.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo đồng hồ đếm ngược trong JavaScript bằng cách sử dụng ba công nghệ:HTML, CSS và JavaScript. Hãy bắt đầu!
Thiết lập trang web của chúng tôi
Bước đầu tiên là thiết lập trang web cơ bản của chúng tôi. Trong hướng dẫn này, chúng tôi sẽ không phải lo lắng về việc sử dụng bất kỳ thư viện bên ngoài nào. Chúng tôi sẽ giữ cho nó đơn giản và sử dụng HTML, CSS và JavaScript cũ thuần túy.
Hãy bắt đầu bằng cách tạo tệp HTML của chúng tôi:
<!DOCTYPE html> <html> <script> // We'll store our JavaScript code here </script> <style> // We'll write our CSS styles here </style> <body> <h1>It's almost time…</h1> <div id="timer"></div> </body> </html>
Mã của chúng tôi không trả lại bất kỳ điều gì đặc biệt ngay bây giờ, hãy xem bên dưới:
Nó xuất hiện theo cách này bởi vì chúng tôi chưa thêm bất kỳ kiểu nào vào mã của mình hoặc tạo bộ đếm thời gian JavaScript của chúng tôi. Hãy chuyển sang tạo JavaScript để hỗ trợ bộ đếm thời gian của chúng ta.
Tạo bộ hẹn giờ của chúng tôi
JavaScript có một đối tượng tiện dụng được gọi là Date mà chúng ta có thể sử dụng để làm việc với ngày và giờ. Chúng ta sẽ sử dụng đối tượng này cho hai mục đích:lấy dấu thời gian của thời gian mà chúng ta muốn đếm ngược và lấy ngày hiện tại.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Trong hướng dẫn này, chúng ta sẽ viết tất cả các tập lệnh của mình trong thẻ . Chúng tôi sẽ không sử dụng bất kỳ tập lệnh bên ngoài nào.
Trừ ngày mà chúng ta đang đếm ngược so với ngày hiện tại sẽ cho chúng ta sự khác biệt giữa hai ngày này:
var timeLeft = +new Date("2021-05-04") - +new Date();
Mã này sẽ tính toán số ngày còn lại cho đến Ngày Chiến tranh giữa các vì sao tiếp theo, tức là ngày 4 tháng 5 năm 2021.
Mặc dù bây giờ chúng tôi biết sự khác biệt giữa hai ngày này, nhưng có một số vấn đề. Đầu tiên, chúng tôi chưa có đồng hồ đếm ngược. Thứ hai, ngày của chúng tôi không được lưu trữ ở định dạng mà con người có thể đọc được. Nó được lưu trữ bằng mili giây, điều này không thực sự thuận tiện cho chúng tôi. Chúng ta cần chuyển đổi thời gian thành ngày, giờ và phút.
Để tính toán thời gian còn lại ở định dạng dễ đọc hơn, chúng tôi sẽ sử 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 tôi có thể định dạng các giá trị thành một chuỗi bằng cách sử dụng mã này:
const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;
Trong mã này, chúng tôi sử dụng nội suy chuỗi để thay thế các giá trị mà chúng tôi đã tính toán trước đó. Điều này sẽ cung cấp cho chúng tôi một dấu thời gian như:314 ngày 13 giờ 52 phút.
Bây giờ chúng tôi đã tạo dấu thời gian của mình, chúng tôi có thể đặt nó trên trang web của mình:
document.getElementById("timer").innerHTML = timeLeftText; Chúng tôi có thể chuyển tất cả mã của mình vào một 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} days ${hoursLeft} hours ${minutesLeft} minutes.`;
document.getElementById("timer").innerHTML = timeLeftText;
}
countdown();
Khi chúng tôi tải trang của mình, thông tin sau sẽ được trả về:
Bây giờ chúng tôi có bộ đếm thời gian của chúng tôi. Chúng ta đã hoàn thành trong ngày, phải không? Không; không quá nhanh. Nếu bạn đợi một phút, bạn sẽ thấy đồng hồ của chúng tôi không thực sự đếm ngược. Đó là bởi vì chúng tôi cần yêu cầu trình duyệt của mình cập nhật mỗi phút. Chúng tôi làm như vậy bằng cách sử dụng mã này:
setInterval(countdown, 60000);
Mã này sẽ được thêm vào sau khi khai báo hàm countdown () của chúng ta. Thao tác này sẽ làm mới trang của chúng tôi sau mỗi 60.000 mili giây. Điều này tương đương với mỗi 60 giây.
Bây giờ, khi chúng tôi cập nhật mã của mình, bạn sẽ thấy rằng nó thay đổi mỗi phút!
Thêm một số kiểu
Đồng hồ đếm ngược của chúng tôi có thể hoạt động được, nhưng nó không chính xác về mặt thẩm mỹ. Hãy tạo một vài kiểu để làm cho trang của chúng ta hấp dẫn 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 của chúng tôi bây giờ trông giống như sau:
Như bạn có thể thấy, trang của chúng tôi hiện có nền gradient, văn bản của chúng tôi được căn chỉnh ở giữa và văn bản của chúng tôi xuất hiện bằng màu trắng. Nó trông rất tuyệt!
Kết luận
Đồng hồ đếm ngược là một tính năng quan trọng của nhiều trang web. Bạn sẽ thấy bộ đếm ngược trên cả trang web cá nhân và trang web chuyên nghiệp. Blog của một người có thể đếm ngược đến đám cưới của họ. Trang web của công ty có thể có tính năng đếm ngược đến khi ra mắt sản phẩm.
Bây giờ, bạn đã sẵn sàng tạo đồng hồ đếm ngược JavaScript của riêng mình như một chuyên gia!