Trong ví dụ này, bạn sẽ học cách viết một chương trình JavScript để tạo đồng hồ đếm ngược.
Để hiểu ví dụ này, bạn nên có kiến thức về các chủ đề lập trình JavaScript sau:
- Tầng Toán JavaScript ()
- Ngày và giờ JavaScript
- Javascript setInterval ()
Ví dụ: Tạo Đồng hồ đếm ngược
// program to create a countdown timer // time to countdown from (in milliseconds) let countDownDate = new Date().getTime() + 24 * 60 * 60 * 1000; // countdown timer let x = setInterval(function() ( // get today's date and time in milliseconds let now = new Date().getTime(); // find the interval between now and the countdown time let timeLeft = countDownDate - now; // time calculations for days, hours, minutes and seconds const days = Math.floor( timeLeft/(1000*60*60*24) ); const hours = Math.floor( (timeLeft/(1000*60*60)) % 24 ); const minutes = Math.floor( (timeLeft/1000/60) % 60 ); const seconds = Math.floor( (timeLeft/1000) % 60 ); // display the result in the element with console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); // clearing countdown when complete if (timeLeft < 0) ( clearInterval(x); console.log('CountDown Finished'); ) ), 2000);
Đầu ra
0 ngày 23h 59 phút 57 giây 0 ngày 23h 59 phút 55 giây 0 ngày 23h 59 phút 53 giây 0 ngày 23h 59 phút 51 giây…
Trong chương trình trên, setInterval()phương thức được sử dụng để tạo bộ đếm thời gian.
Các setInterval()phương pháp được thực hiện tại một thời điểm khoảng nhất định (ở đây, 2000 mili giây).
Cho new Date()biết ngày và giờ hiện tại. Ví dụ,
let d1 = new Date(); console.log(time); // Fri Aug 28 2020 09:19:40 GMT+0545 (+0545)
Các getTime()phương thức trả về số mili giây từ nửa đêm ngày 1 tháng 1 năm 1970 (ECMAScript kỷ nguyên) đến thời điểm nhất định (ở đây, ngày hiện tại).
Đoạn mã sau cung cấp thời gian của ngày hôm sau tính bằng mili giây.
new Date().getTime() + 24 * 60 * 60 * 1000;
Bây giờ, chúng ta có thể tính thời gian còn lại bằng công thức sau:
let timeLeft = countDownDate - now;
Số ngày còn lại được tính bằng cách sử dụng:
- Khoảng thời gian được chia cho 1000 để xác định số giây, tức là
timeLeft / 1000 - Khoảng thời gian sau đó được chia cho 60 * 60 * 24 để xác định số ngày còn lại.
- Các
Math.floor()chức năng được sử dụng để làm tròn số đến một số nguyên.
Các phương pháp tương tự được sử dụng cho giờ, phút và giây.
Lưu ý : Bạn cũng có thể sử dụng thời gian đếm ngược bắt đầu tùy chỉnh bằng cách chuyển một ngày cụ thể.
Ví dụ,
let countDownDate = new Date("Aug 5, 2025 14:22:36").getTime();
