Để tạo một trang HTML với chức năng hiển thị thời gian đếm ngược, bạn có thể sử dụng JavaScript để tính toán và hiển thị thời gian đếm ngược trên trang web của mình. Dưới đây là một ví dụ đơn giản cho code đếm ngược thời gian:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bao nhiêu ngày nữa đến tết</title>
</head>
<body>
<h1 id="countdown"></h1>
<script>
// Thời gian đích
const targetDate = new Date("2023-04-01T00:00:00Z");
// Hàm tính toán thời gian đếm ngược
function countdown() {
const now = new Date();
const diff = targetDate - now;
// Tính toán số giờ, phút, giây còn lại
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((diff / 1000 / 60) % 60);
const seconds = Math.floor((diff / 1000) % 60);
// Hiển thị thời gian đếm ngược trên trang web
document.getElementById("countdown").innerHTML =
`${days} ngày ${hours} giờ ${minutes} phút ${seconds} giây`;
// Cập nhật lại thời gian đếm ngược sau mỗi 1 giây
setTimeout(countdown, 1000);
}
// Gọi hàm tính toán thời gian đếm ngược khi trang web được tải lên
countdown();
</script>
</body>
</html>
Trong ví dụ này, chúng ta sử dụng hàm countdown() để tính toán thời gian đếm ngược từ thời điểm hiện tại đến một thời điểm đích được đặt sẵn (ở đây là 00:00:00 ngày 1 tháng 1 năm 2024, theo múi giờ UTC). Sau đó, chúng ta sử dụng phương thức getElementById() để thêm nội dung thời gian đếm ngược vào phần tử <h1> trong trang HTML, và sử dụng phương thức setTimeout() để cập nhật thời gian đếm ngược sau mỗi 1 giây. Bạn có thể thay đổi thời gian đích và định dạng hiển thị thời gian đếm ngược theo ý của mình.
Cảm ơn các bạn đã ghé thăm Sharecs.net. Chúc các bạn thành công!
