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 secondconst 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 messageif (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ạivar now = new Date();// Tính thời gian còn lại đến 24:00:00var 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âyvar 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ử HTMLdocument.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âysetInterval(updateCountdown, 1000);//]]></script>
Bài viết: Code tạo thời gian đếm ngược được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.