Code Javascript đồng hồ đếm ngược cho web hoặc blogspot

Code Javascript đồng hồ đếm ngược cho web hoặc blogspot

Đôi khi chúng ta có những sự kiện, khuyến mại hoặc một cái gì đó cần đến đồng hồ đếm ngược để thúc giục mọi người đăng ký. Thì đây sẽ là giải pháp toàn diện cho các bạn muốn sử dụng đồng đếm ngược (Countdown).

Đếm ngược fake

Tại sao lại gọi là đếm ngược fake, vì cứ khi hết giờ là nó lại đếm lại. Kiểu như sắp hết hạn rồi, nhưng khi hết hạn thì tự lại có thời hạn tiếp.

Bạn sử dụng đoạn code dưới đây, thay đổi thời gian và các nội dung muốn hiển thị theo ý muốn là được:

<p id="countdown"></p>

<script>
function updateCountdown() {
  let now = new Date();
  let target = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3, 0, 0, 0);
  let diff = target - now;

  if (diff <= 0) {
    location.reload();
  }

  let days = Math.floor(diff / 1000 / 60 / 60 / 24);
  let hours = Math.floor(diff / 1000 / 60 / 60) % 24;
  let minutes = Math.floor(diff / 1000 / 60) % 60;
  let seconds = Math.floor(diff / 1000) % 60;

  document.querySelector("#countdown").innerHTML = `Time left: ${days}d ${hours}h ${minutes}m ${seconds}s`;
}

updateCountdown();
setInterval(updateCountdown, 1000);
</script>

Đếm ngược hết hạn

Sau khi hết đếm ngược thì đồng hồ sẽ ẩn đi và hiển thị một thông báo "Expired" hoặc là gì do bạn tùy chỉnh.

<p id="countdown"></p>

<script>
function updateCountdown() {
  let now = new Date();
  let target = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3, 0, 0, 0);
  let diff = target - now;

  if (diff <= 0) {
    document.querySelector("#countdown").innerHTML = "Expired";
    return;
  }

  let days = Math.floor(diff / 1000 / 60 / 60 / 24);
  let hours = Math.floor(diff / 1000 / 60 / 60) % 24;
  let minutes = Math.floor(diff / 1000 / 60) % 60;
  let seconds = Math.floor(diff / 1000) % 60;

  document.querySelector("#countdown").innerHTML = `Time left: ${days}d ${hours}h ${minutes}m ${seconds}s`;
}

updateCountdown();
setInterval(updateCountdown, 1000);
</script>

Đếm ngược với thời gian cụ thể

Bạn có thể tùy chỉnh thời gian nó sẽ hết hạn tại biến targetDate, sau khi hết hạn nó sẽ hiển thị thông báo "Expired" hoặc bạn có thể sửa thành nội dung khác.

<p id="countdown"></p>

<script>
function updateCountdown(targetDate) {
  let now = new Date();
  let diff = targetDate - now;

  if (diff <= 0) {
    document.querySelector("#countdown").innerHTML = "Expired";
    return;
  }

  let days = Math.floor(diff / 1000 / 60 / 60 / 24);
  let hours = Math.floor(diff / 1000 / 60 / 60) % 24;
  let minutes = Math.floor(diff / 1000 / 60) % 60;
  let seconds = Math.floor(diff / 1000) % 60;

  document.querySelector("#countdown").innerHTML = `Time left: ${days}d ${hours}h ${minutes}m ${seconds}s`;
}

let targetDate = new Date(2023, 2, 10, 12, 0, 0);
updateCountdown(targetDate);
setInterval(() => {
  updateCountdown(targetDate);
}, 1000);
</script>

Cách sử dụng

Chèn Javascript vào code của website hoặc blogspot trước thẻ </body>. Chèn <p id="countdown"></p> vào nơi muốn đồng hồ đếm ngược hiển thị.

Tham khảo cách chèn Javascript vào Blogspot nếu chưa biết làm

Chúc các bạn thành công