Hướng dẫn cách tạo thời gian đếm ngược bằng html và js

Tạo thời gian đếm ngược bằng html và js để trang trí trên blog cá nhân là một cái rất hay, đặc biệt là sắp đến tết Dương lịch, và tết Âm lịch. Hôm nay mình sẽ chia sẻ với các bạn đoạn code đơn giản để tạo cái thời gian đếm ngược. Vậy nên, nếu bạn chưa biết cách làm sao để tạo ra một chiếc đồng hồ đếm ngược thì hãy theo dõi bài hướng dẫn dưới đây nhé!

Cách tạo thời gian đếm ngược bằng html css và js

Để tạo đồng hồ đếm ngược trong HTML và JavaScript, bạn có thể làm theo các bước sau.

Có thể bạn quan tâm: code tạo mật khẩu ngẫu nhiên bằng html css và js

1] Code html

Bắt đầu bằng cách tạo cấu trúc HTML cho đồng hồ đếm ngược. Bạn có thể sử dụng một <div>phần tử để hiển thị bộ đếm thời gian và đặt cho nó một id để dễ dàng truy cập bằng JavaScript.

<div id="countdown"></div>

2] CSS

Để tạo chó nó có ít style riêng thì bạn thêm css vào nhé

#countdown{
  font-family: Arial, Helvetica, sans-serif;
  width:450px;
  margin: 0 auto;
  text-align:center;
  padding:5vh;
  background: red;
  border-radius:100px;
  color: #fff;
  font-size:20px;
}

2] Js

Trong mã JavaScript của mình, bạn có thể sử dụng setInterval()hàm để cập nhật đếm ngược mỗi giây. Bên trong hàm, bạn có thể tính thời gian còn lại và cập nhật phần tử HTML với giá trị mới.

// Set the target date and time
const targetDate = new Date('2022-01-01 00:00:00').getTime();

// Update the countdown every second
setInterval(() => {
  // Get the current date and time
  const currentDate = new Date().getTime();

  // Calculate the remaining time
  const remainingTime = targetDate - currentDate;

  // Convert the remaining time to days, hours, minutes, and seconds
  const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

  // Update the HTML element with the new value
  document.getElementById('countdown').innerHTML = `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`;
}, 1000);

Tùy chỉnh đồng hồ đếm ngược theo nhu cầu của bạn bằng cách sửa đổi ngày giờ mục tiêu và phần tử HTML nơi hiển thị đếm ngược.

Kết luận

Với các bước này, bạn có thể biết tạo thời gian đếm ngược bằng html và js. Vui lòng điều chỉnh mã để phù hợp với yêu cầu cụ thể và sở thích về kiểu dáng của bạn. Hy vọng với chia sẻ mà Blog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn, chúc bạn thành công.

Theo dõi trên