Dưới đây là source CSS tạo đồng hồ đếm ngược, bạn có thể tham khảo.
<!-- Hiển thị đồng hồ đếm ngược trong một phần tử -->
<p id="demo"></p>
<script>
// Ở phần này, bạn sẽ điền thời gian kết thúc đồng hồ vào trong () với form ("Month Date, Year hh:mm:ss")
var countDownDate = new Date("Jan 1, 2023 15:37:25").getTime();
// Phần này để cập nhật đếm ngược sau mỗi 1 giây
var x = setInterval(function() {
// Phần này để nhận dữ liệu ngày và giờ hiện tại
var now = new Date().getTime();
// Phần này để tìm khoảng cách giữa thời điểm hiện tại và thời điểm kết thúc đếm ngược
var distance = countDownDate - now;
// Phần này để tính thời gian cho ngày, giờ, phút và giây
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Phần này để hiển thị kết quả trong phần tử với id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// Nếu đã đến thời gian đếm ngược, bạn có thể ghi dòng chữ gì đó vào trong "" của innerHTML = "", chẳng hạn như "Hết hạn" thì "innerHTML = "Hết hạn""
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
