Code tạo thời gian đếm ngược

Dưới đây là một ví dụ về mã HTML, CSS và JavaScript để tạo một bảng đếm ngược đẹp cho ngày, giờ, phút và giây. Bạn có thể tùy chỉnh mã này theo nhu cầu của mình. Chia sẻ code thời gian đếm ngược theo 1 ngày cố định.

1. Code countdown theo 1 ngày cài trước trong tương lai

<style>
/*<![CDATA[*/
#countdown{text-align:center}
.timer{display:inline-block;margin:0 10px;padding:10px;background-color:#333;color:#fff;font-size:24px;border-radius:5px}
.timer:hover{opacity:1;transform:scale(1);box-shadow:0 0 10px rgba(255,255,255,1)}
/*]]>*/
</style>
<div id="countdown">
  <div class="timer" id="days">00 Ngày</div>
  <div class="timer" id="hours">00 Giờ</div>
  <div class="timer" id="minutes">00 Phút</div>
  <div class="timer" id="seconds">00 Giây</div>
</div>
<script>
  //<![CDATA[
  // Set the date we're counting down to (MM/dd/yyyy format)
  const countDownDate = new Date("01/01/2025 00:00:00").getTime();
  // Update the countdown every 1 second
  const x = setInterval(function() {
    const now = new Date().getTime();
    const distance = countDownDate - now;
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    document.getElementById("days").innerText = (days < 10 ? "0" + days : days) + " Ngày";
    document.getElementById("hours").innerText = (hours < 10 ? "0" + hours : hours) + " Giờ";
    document.getElementById("minutes").innerText = (minutes < 10 ? "0" + minutes : minutes) + " Phút";
    document.getElementById("seconds").innerText = (seconds < 10 ? "0" + seconds : seconds) + " Giây";
    // If the countdown is over, display a message
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("countdown").innerHTML = "<div class='timer'>EXPIRED</div>";
    }
  }, 1000);
  //]]>
</script>

2. Code đếm ngược 24h của ngày hiện tại không cần cài ngày

<style>
/*<![CDATA[*/
#countdown{text-align:center}
.timer{display:inline-block;margin:0 10px;padding:10px;background-color:#333;color:#fff;font-size:24px;border-radius:5px}
.timer:hover{opacity:1;transform:scale(1);box-shadow:0 0 10px rgba(255,255,255,1)}
/*]]>*/
</style>
<div id="countdown">
  <div class="timer" id="hours">00 Giờ</div>
  <div class="timer" id="minutes">00 Phút</div>
  <div class="timer" id="seconds">00 Giây</div>
</div>
<script>
  //<![CDATA[
  function updateCountdown() {
    // Lấy thời gian hiện tại
    var now = new Date();
    // Tính thời gian còn lại đến 24:00:00
    var midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
    var timeLeft = midnight - now;
    // Chuyển đổi thời gian còn lại thành giờ, phút, giây
    var hours = Math.floor(timeLeft / (1000 * 60 * 60));
    var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
    // Cập nhật nội dung các phần tử HTML
    document.getElementById('hours').innerText = (hours < 10 ? '0' : '') + hours + ' Giờ';
    document.getElementById('minutes').innerText = (minutes < 10 ? '0' : '') + minutes + ' Phút';
    document.getElementById('seconds').innerText = (seconds < 10 ? '0' : '') + seconds + ' Giây';
  }
  // Đặt hàm updateCountdown chạy mỗi giây
  setInterval(updateCountdown, 1000);
  //]]>
</script>