[JavaScript] Odliczanie

W tym wpisie stworzymy prosty licznik odliczający od podanej wartości.

Kod HTML

Zacznijmy od utworzenia kontenera dla licznika:

<div class="counter-container">
        <div id="counter" class="counter">100</div>
    </div>

Kod CSS

Utwórzmy jakieś efekty animowane dla licznika:

.counter {

    font-size: 100px;
    transition: transform 0.3s ease, color 0.3s ease;
            
}

.fade {
        
    opacity: 0;
    transition: opacity 0.3s ease;
            
}
        
.bounce {
        
    animation: bounce 0.3s ease;
            
}

@keyframes bounce {
        
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
            
}

Kod JavaScript

document.addEventListener('DOMContentLoaded', () => {

    const startNumber = 100; // Odliczamy od
    const countdownSpeed = 500; // Prędkość odliczania (w milisekundach)
    const counterElement = document.getElementById('counter');
    let currentNumber = startNumber;

    function updateCounter() {
    
        // Aktualną wartość zmniejszamy o 1
        currentNumber = Math.max(0, currentNumber - 1);

        // Efekt zanikania i odbicia dla aktualnej liczby
        counterElement.classList.add('fade');

        setTimeout(() => {
        
            counterElement.textContent = currentNumber;

            // Dodaj efekt odbicia
            counterElement.classList.add('bounce');

            // Zmiana koloru (np. na czerwony) podczas zmiany liczby
            if(currentNumber > 0) {
            
                counterElement.style.color = '#ff4757';
                
            }
            
            else {
            
                counterElement.style.color = '#ffffff'; // Przywracamy kolor docelowy
                
                
            }

            // Resetowanie efektów
            setTimeout(() => {
            
                counterElement.classList.remove('fade');
                counterElement.classList.remove('bounce');
                counterElement.style.color = '#ffffff';
                
            }, 300); // Czas trwania efektu zanikania
            
        }, 300); // Czas po którym liczba się zmienia

        if(currentNumber > 0) {
        
            setTimeout(updateCounter, countdownSpeed); // Użycie prędkości odliczania
            
        }
        
    }

    updateCounter(); // Rozpoczęcie odliczania
    
});

Demo

100