Cách tạo đồng hồ đếm ngược có dòng chảy

Em muốn tạo đồng hồ đếm ngược mà có dòng chảy ở dưới ạ :smiley: kiểu như 1 thẻ hr với màu đen & sẽ ngắn dần khi thời gian đếm ngược :smiley: có bác nào có ý tưởng gì thì cho em xin :smiley: phần đếm ngược em đã làm đc nhưng chỉ hiện mỗi số, giờ muốn cho nó thêm sinh động chút :smiley:

 function countDown(totalSeconds, elementId, testId) {
 
     var element = document.getElementById(elementId);
     if (totalSeconds > 0)
         element.innerHTML = formatTimer(totalSeconds);
     else {
         element.innerHTML = "00:00";
         var url = baseUrl   '/ket-thuc/' testId;
         clearTimeout(timer);
         window.location = url;
     }
 
     var timer = setInterval(function () {
         totalSeconds--;
         if (totalSeconds <= 0) {
             element.innerHTML = "00:00";
 
             var url = baseUrl   '/ket-thuc/' testId;
             clearTimeout(timer);
             window.location = url;
         }
         else {
             element.innerHTML = formatTimer(totalSeconds);
         }
     }, 1000);
 }
 
 function formatTimer(totalSeconds) {
     var hour = Math.floor(totalSeconds / 3600);
     var minute = Math.floor((totalSeconds - (hour * 3600)) / 60);
     var second = totalSeconds - (hour * 3600) - (minute * 60);
 
     return minute.toString().padStart(2, '0')   ":"   second.toString().padStart(2, '0');
 }
1 Like

Thay đổi chiều rộng (width) của thẻ (div chẳng hạn) theo thời gian thôi.

4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?