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

Chào mừng các bạn đến với Tricker Channel! Trong bài viết hôm nay, chúng ta sẽ khám phá cách tạo thời gian đếm ngược đơn giản nhưng ấn tượng bằng cách sử dụng mã nguồn HTML, CSS và JavaScript trong lập trình. Thông qua bài viết này, bạn sẽ hiểu cách tạo ra một hiệu ứng đặc biệt để làm cho Blog của bạn trở nên thú vị hơn.

Mục lục bài viết

Code thời gian đếm ngược theo 1 ngày cố định

Đầu tiên, các bạn cần copy toàn bộ đoạn code dưới đây và dán vào bất kỳ nơi nào bạn muốn hiển thị đồng hồ đếm ngược.

Bài viết liên quan:

• Hướng dẫn Cr@ck Adobe | Sử dụng AI của Photoshop, Illustrator
• Hướng dẫn Crack gói Bumble Gold | Mới Nhất 2023
• Cách sửa lỗi máy tính tự khởi động lại liên tục

Sau khi đã dán Code vào vị trí mong muốn, các bạn hãy chỉnh lại ngày/tháng/năm muốn đếm ngược 

03/11/2024 ➢ Chỉnh sửa ngày bạn muốn đếm ngược theo định dạng mm/dd/yyyy

00:00:00 ➢ Chỉnh sửa thời gian bạn muốn đếm ngược

<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("03/11/2024 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>

Demo code thời gian đếm ngược theo 1 ngày cố định

00 Ngày

00 Giờ

00 Phút

00 Giây

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

Tương tự như ở trên, các bạn cần copy toàn bộ đoạn code dưới đây và dán vào bất kỳ nơi nào bạn muốn hiển thị đồng hồ đếm ngược.

<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>

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

00 Giờ

00 Phút

00 Giây

Lời kết

Hy vọng rằng bài viết này sẽ giúp bạn làm cho trang web của mình trở nên thú vị hơn và thu hút nhiều hơn sự chú ý từ đọc giả. Hãy theo dõi Tricker Channel để cập nhật thêm nhiều ý tưởng sáng tạo và mã nguồn hữu ích khác!

Facebook: Dịch Vụ Mạng Xã Hội Đà Nẵng
Zalo: Dịch Vụ Đà Nẵng
Phone: 0333.110304
Gmail: mxhdn.xyz@gmail.com
Thanh toán: Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 35% phí,...