Geri sayım sayacıları, web uygulamalarınıza etkileşim ve aciliyet duygusu katmanın harika bir yoludur. Bu kılavuz, temel uygulamadan gelişmiş özelliklere kadar her şeyi kapsayan, JavaScript’te özelleştirilebilir geri sayım sayacıları oluşturmak için kapsamlı bir yaklaşım sunmaktadır.
İçindekiler
- Temel Geri Sayım Sayacı Oluşturma
- Geri Sayım Sayacınızı Özelleştirme
- Gelişmiş Geri Sayım Sayacı Özellikleri
Temel Geri Sayım Sayacı Oluşturma
10 saniyeden geri sayan basit bir geri sayım sayacı ile başlayalım. Bu örnek, anlaşılması ve uygulanması kolay olması için yalnızca HTML ve JavaScript kullanır.
<!DOCTYPE html>
<html>
<head>
<title>Geri Sayım Sayacı</title>
</head>
<body>
<p>Geri Sayım: <span id="countdown">10</span> saniye</p>
<script>
let timeLeft = 10;
const countdownElement = document.getElementById("countdown");
const timerInterval = setInterval(function() {
if (timeLeft <= 0) {
clearInterval(timerInterval);
countdownElement.textContent = "Süre doldu!";
} else {
countdownElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</body>
</html>
Bu kod önce bir timeLeft değişkeni tanımlar. Ardından, her saniyede bir fonksiyonu tekrar tekrar çalıştırmak için setInterval kullanır. Bu fonksiyon timeLeft‘i azaltır ve görüntülenen geri sayımı günceller. timeLeft 0’a ulaştığında, aralık temizlenir ve “Süre doldu!” görüntülenir.
Geri Sayım Sayacınızı Özelleştirme
Kullanıcı tanımlı giriş ve biçimlendirilmiş çıktı ile sayacımızı geliştirelim.
let startTime = parseInt(prompt("Geri sayım süresini saniye cinsinden girin:", 10);
let timeLeft = startTime;
const countdownElement = document.getElementById("countdown");
const timerInterval = setInterval(function() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (timeLeft <= 0) {
clearInterval(timerInterval);
countdownElement.textContent = "Süre doldu!";
} else {
countdownElement.textContent = formattedTime;
timeLeft--;
}
}, 1000);
Bu geliştirilmiş sürüm, kullanıcıdan başlangıç süresini ister, dakika ve saniyeleri işler ve daha iyi okunabilirlik (DD:SS) için çıktıyı biçimlendirir.
Gelişmiş Geri Sayım Sayacı Özellikleri
Sayacı daha da çok yönlü hale getirmek için şu geliştirmeleri göz önünde bulundurun:
- Olay İşleme: Sayaç sıfıra ulaştığında bir fonksiyon tetikleyin. Bu, bir formu göndermek, kullanıcıyı yönlendirmek veya başka herhangi bir işlem yapmak için kullanılabilir.
- Duraklat/Devam İşlevi: Geri sayımı duraklatmak ve devam ettirmek için düğmeler ekleyin.
- CSS ile Stil Verme: Özel CSS ile sayacınızın görsel çekiciliğini artırın.
Bu teknikleri birleştirerek, web projeleriniz için oldukça işlevsel ve görsel olarak çekici geri sayım sayacıları oluşturabilirsiniz.