Cách đặt bộ đếm ngược (countdown timer) trong JavaScript

Bạn có thể tạo bộ đếm ngược trong JavaScript bằng phương thức setInterval. Phương thức setInterval() lặp lại gọi một hàm hoặc thực thi đoạn mã với độ trễ cố định giữa các lần gọi.

Để tạo countdown, ta cần kiểm tra độ chênh lệch giữa thời gian hiện tại và thời gian kết thúc, và cập nhật liên tục. Ví dụ:

Ví dụ

let countDownDate = new Date("Jul 21, 2020 00:00:00").getTime();
let x = setInterval(() => {
  let now = new Date().getTime();
  let distance = countDownDate - now;
  // Tính toán ngày, giờ, phút, giây
  let days = Math.floor(distance / (1000 * 60 * 60 * 24));
  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((distance % (1000 * 60)) / 1000);
  console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s");
  // Nếu countdown kết thúc
  if (distance < 0) {
    clearInterval(x);
    console.log("completed")
  }
}, 1000);

Kết quả

Đoạn mã trên sẽ xuất ra (ví dụ):

310d 0h 6m 46s
310d 0h 6m 45s
310d 0h 6m 44s
...