[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
Komentarze
Prze艣lij komentarz
Dzi臋ki za komentarz!