JavaScript ile Geri Sayım Sayacı Nasıl Oluşturulur?

Basit Bir HTML Şablonu

    

        00
        
Gün
    
    

        00
        
Saat
    
    

        00
        
Dakika
    
    

        00
        
Saniye
    


    Geri sayım sona erdi!

Bu yapı, her bir zaman birimini ayrı ayrı güncelleyebilmemizi sağlar. geriSayimBittiMesaji elementi, sayaç bittiğinde gösterilecek bir mesaj için yer tutar.

CSS ile Stil Belirleme (Opsiyonel ama iyi olur)

Sayacın daha iyi görünmesi için basit bir CSS ekleyebiliriz. Bu, makalenin ana konusu olmasa da, kullanıcı deneyimi açısından önemlidir.

#geriSayimSayaci {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-family: Arial, sans-serif;
    margin-top: 50px;
}

.zaman-birimi {
    text-align: center;
    background-color: #f0f0f0;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.zaman-birimi span {
    display: block;
    font-size: 3em;
    font-weight: bold;
    color: #333;
}

.zaman-birimi .etiket {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

#geriSayimBittiMesaji {
    text-align: center;
    margin-top: 30px;
    font-size: 1.5em;
    color: #e44d26;
    font-weight: bold;
}

JavaScript Kodu: Adım Adım Oluşturma

Şimdiye kadar öğrendiğimiz tüm parçaları bir araya getirerek JavaScript kodunu yazmaya başlayabiliriz.

Değişken Tanımlamaları

Öncelikle, hedef tarihi ve HTML elementlerini referans alacak değişkenleri tanımlayalım.

// Hedef tarihi belirle
const hedefTarih = new Date("Dec 31, 2024 23:59:59").getTime(); // Milisaniye cinsinden alıyoruz

// HTML elementlerini seç
const gunlerEl = document.getElementById('gunler');
const saatlerEl = document.getElementById('saatler');
const dakikalarEl = document.getElementById('dakikalar');
const saniyelerEl = document.getElementById('saniyeler');
const geriSayimBittiMesajiEl = document.getElementById('geriSayimBittiMesaji');
const geriSayimSayaciEl = document.getElementById('geriSayimSayaci');

// Zaman birimleri için milisaniye değerleri
const birSaniye = 1000;
const birDakika = birSaniye * 60;
const birSaat = birDakika * 60;
const birGun = birSaat * 24;

updateCountdown Fonksiyonu

Geri sayım mantığını içeren ana fonksiyonu oluşturalım. Bu fonksiyon, her saniye çağrılacak ve sayaç değerlerini güncelleyecektir.

function ikiHaneYap(sayi) {
    return String(sayi).padStart(2, '0');
}

function updateCountdown() {
    const simdi = new Date().getTime(); // Mevcut zamanı milisaniye cinsinden al
    const farkMilisaniye = hedefTarih - simdi;

    // Geri sayım bittiyse
    if (farkMilisaniye < 0) {
        clearInterval(sayacInterval); // Zamanlayıcıyı durdur
        geriSayimSayaciEl.style.display = 'none'; // Sayacı gizle
        geriSayimBittiMesajiEl.style.display = 'block'; // Bitti mesajını göster
        return; // Fonksiyondan çık
    }

    // Zaman farkını hesapla
    const gunler = Math.floor(farkMilisaniye / birGun);
    const saatler = Math.floor((farkMilisaniye % birGun) / birSaat);
    const dakikalar = Math.floor((farkMilisaniye % birSaat) / birDakika);
    const saniyeler = Math.floor((farkMilisaniye % birDakika) / birSaniye);

    // HTML elementlerini güncelle
    gunlerEl.innerHTML = ikiHaneYap(gunler);
    saatlerEl.innerHTML = ikiHaneYap(saatler);
    dakikalarEl.innerHTML = ikiHaneYap(dakikalar);
    saniyelerEl.innerHTML = ikiHaneYap(saniyeler);
}

setInterval Kullanımı

updateCountdown fonksiyonunun her saniye çalışmasını sağlamak için setInterval metodunu kullanacağız. Bu metod, belirli bir aralıkta (milisaniye cinsinden) bir fonksiyonu tekrar tekrar yürütür.

// Sayacı hemen bir kere güncelle (ilk yüklemede doğru değerleri göstermek için)
updateCountdown();

// Her saniye güncellemek için setInterval kullan
const sayacInterval = setInterval(updateCountdown, 1000); // Her 1000 milisaniyede (1 saniye) bir çalıştır

setInterval'ın döndürdüğü değeri bir değişkende saklamak önemlidir, böylece geri sayım bittiğinde clearInterval() ile zamanlayıcıyı durdurabiliriz. Aksi takdirde, sayaç negatif değerlerle çalışmaya devam eder ve gereksiz kaynak tüketir.

Sayacın Bitmesi Durumu

updateCountdown fonksiyonunun içinde, farkMilisaniye değerinin sıfırın altına düşüp düşmediğini kontrol ediyoruz. Eğer düşerse, clearInterval ile zamanlayıcıyı durduruyor, sayaç elementini gizliyor ve "geri sayım sona erdi" mesajını görünür hale getiriyoruz.

Bu, temel bir geri sayım sayacının eksiksiz JavaScript kodudur.

Gelişmiş Özellikler ve İyileştirmeler

Temel sayacı oluşturduktan sonra, kullanıcı deneyimini ve işlevselliği artırmak için bazı gelişmiş özellikler ekleyebiliriz.

Dinamik Hedef Tarih Belirleme

Hedef tarihi sabit kodlamak yerine, kullanıcıdan girdi alarak, bir API'den çekerek veya URL parametrelerinden okuyarak dinamik hale getirebiliriz.

* Kullanıcı Girişi: Bir form aracılığıyla kullanıcıdan tarih ve saat girmesini isteyebiliriz.
* API Entegrasyonu: Bir etkinlik yönetim sistemi veya takvim API'sinden etkinlik tarihlerini çekebiliriz.
* URL Parametreleri: ?targetDate=2025-01-01T00:00:00 gibi URL parametreleri kullanarak hedef tarihi dinamik olarak ayarlayabiliriz.

// Örnek: URL'den hedef tarihi okuma
function getTargetDateFromUrl() {
    const urlParams = new URLSearchParams(window.location.search);
    const dateString = urlParams.get('targetDate');
    if (dateString) {
        const parsedDate = new Date(dateString);
        if (!isNaN(parsedDate.getTime())) { // Geçerli bir tarih mi kontrol et
            return parsedDate.getTime();
        }
    }
    return new Date("Dec 31, 2024 23:59:59").getTime(); // Varsayılan tarih
}

const hedefTarih = getTargetDateFromUrl();

Duraklatma ve Devam Ettirme

Bazı durumlarda, geri sayımı duraklatma ve daha sonra devam ettirme işlevselliği gerekebilir. Bu, clearInterval ve setInterval'ı doğru zamanda çağırarak yapılabilir.

let isPaused = false;
let kalanMilisaniye = 0; // Duraklatıldığında kalan süreyi saklamak için

function togglePause() {
    if (isPaused) {
        // Devam et
        isPaused = false;
        // Kalan süreden yeni hedef tarihi hesapla
        hedefTarih = new Date().getTime() + kalanMilisaniye;
        sayacInterval = setInterval(updateCountdown, 1000);
    } else {
        // Duraklat
        isPaused = true;
        clearInterval(sayacInterval);
        const simdi = new Date().getTime();
        kalanMilisaniye = hedefTarih - simdi; // Kalan süreyi kaydet
    }
}

Bu, duraklatma ve devam ettirme işlevselliğini eklemek için temel bir yaklaşımdır.

Geri Sayım Bittiğinde Yapılacaklar (Callback Fonksiyonları)

Geri sayım sona erdiğinde belirli bir eylemi tetiklemek (örn. bir pop-up göstermek, bir sayfayı yeniden yüklemek) için bir callback fonksiyonu kullanabiliriz.

function geriSayimBittiCallback() {
    console.log("Geri sayım sona erdi! Şimdi bir şeyler yapabiliriz.");
    // alert("Kampanya bitti!");
    // window.location.reload();
}

function updateCountdown() {
    // ... (önceki kod) ...

    if (farkMilisaniye < 0) {
        clearInterval(sayacInterval);
        geriSayimSayaciEl.style.display = 'none';
        geriSayimBittiMesajiEl.style.display = 'block';
        geriSayimBittiCallback(); // Callback fonksiyonunu çağır
        return;
    }
    // ... (kalan kod) ...
}

Kullanıcı Deneyimi İyileştirmeleri (Animasyonlar, Sesler)

Geri sayım sayacını daha çekici hale getirmek için animasyonlar veya ses efektleri eklenebilir.

* CSS Animasyonları: Sayılar değiştiğinde hafif bir geçiş veya büyüme/küçülme efekti eklenebilir.
* Ses Efektleri: Son saniyelerde bip sesi veya geri sayım bittiğinde bir zil sesi çalınabilir.
* Görsel Geri Bildirim: Son dakikalarda sayının rengini değiştirmek gibi görsel ipuçları kullanılabilir.

Farklı Formatlarda Görüntüleme

Bazı durumlarda sadece saat:dakika:saniye göstermek isteyebiliriz, veya günler yerine toplam saatleri göstermek isteyebiliriz. Hesaplama mantığını buna göre ayarlamak yeterlidir.

// Sadece saat:dakika:saniye gösterimi için
// gunler hesaplamasını atla
// saatler = Math.floor(farkMilisaniye / birSaat); // Toplam saatleri hesapla
// dakikalar = Math.floor((farkMilisaniye % birSaat) / birDakika);
// saniyeler = Math.floor((farkMilisaniye % birDakika) / birSaniye);

Mobil Uyumluluk ve Performans

Sayacın farklı ekran boyutlarında iyi görünmesini sağlamak için duyarlı CSS kullanmak önemlidir. Ayrıca, JavaScript kodunun performansı, özellikle çok sayıda sayaç veya karmaşık animasyonlar kullanılıyorsa, göz önünde bulundurulmalıdır. setInterval yerine requestAnimationFrame kullanmak daha akıcı animasyonlar sağlayabilir, ancak zamanlayıcılar için setInterval genellikle yeterlidir.

Potansiyel Sorunlar ve Çözümleri

Geri sayım sayaçları oluştururken karşılaşılabilecek bazı yaygın sorunlar ve bunların çözümleri şunlardır:

Zaman Dilimi Farklılıkları

* Sorun: Hedef tarih, geliştiricinin yerel zaman diliminde ayarlanır, ancak kullanıcı farklı bir zaman diliminde olduğunda sayaç yanlış görünür. Örneğin, Türkiye'de 1 Ocak 2025 00:00'a ayarlanan bir sayaç, ABD'deki bir kullanıcı için 31 Aralık 2024 akşamı bitebilir.
* Çözüm: Hedef tarihi her zaman UTC olarak tanımlayın ve hesaplamaları da UTC üzerinden yapın. new Date("2025-01-01T00:00:00Z") gibi ISO 8601 formatında 'Z' (Zulu time, yani UTC) belirteci kullanmak veya Date.UTC() metodunu kullanmak bu sorunu çözer. Ancak, eğer sayaç belirli bir yerel etkinlik içinse, hedef tarihi yerel olarak belirlemek ve kullanıcının tarayıcısının yerel zaman dilimini kullanmasına izin vermek daha uygun olabilir. Bu durumda, kullanıcılar arasındaki zaman dilimi farkının bilincinde olunmalıdır.

Sayfa Yenileme Sorunları (localStorage kullanımı)

* Sorun: Eğer geri sayım sayacı bir oturumla ilgiliyse (örn. bir quiz için kalan süre), sayfa yenilendiğinde sayaç sıfırlanabilir.
* Çözüm: localStorage veya sessionStorage kullanarak sayaç durumunu (başlangıç zamanı, kalan süre vb.) kaydedin. Sayfa yüklendiğinde, depolanan verileri kontrol edin ve geri sayımı kaldığı yerden devam ettirin.

// Örnek: Başlangıç zamanını kaydetme
const baslangicZamaniKey = 'quizBaslangicZamani';
let baslangicZamani = localStorage.getItem(baslangicZamaniKey);

if (!baslangicZamani) {
    baslangicZamani = new Date().getTime();
    localStorage.setItem(baslangicZamaniKey, baslangicZamani);
}

// Hedef tarihi buna göre ayarla (örn. 10 dakika sonra)
const hedefTarih = parseInt(baslangicZamani) + (10 * birDakika);

Performans Optimizasyonu

* Sorun: Çok sayıda geri sayım sayacı veya karmaşık animasyonlar, özellikle eski cihazlarda performansı düşürebilir.
* Çözüm:
* Sadece güncellenmesi gereken DOM elemanlarını güncelleyin.
* Gereksiz hesaplamalardan kaçının.
* requestAnimationFrame animasyonlar için daha akıcı bir deneyim sunsa da, saniyelik güncellemeler için setInterval genellikle yeterlidir.
* Sayfa dışına çıktığında zamanlayıcıyı duraklatmak için document.hidden veya visibilitychange olaylarını kullanabilirsiniz.

Kullanıcı Tarafındaki Saat Ayarları

* Sorun: Kullanıcı, bilgisayarının saatini manuel olarak değiştirirse, geri sayım sayacı yanlış çalışabilir.
* Çözüm: Bu, istemci tarafı JavaScript ile tamamen çözülemeyen bir sorundur. Önemli uygulamalarda, sunucu tarafında bir zaman damgası almak ve istemci tarafındaki hesaplamaları buna göre ayarlamak daha güvenilirdir. Ancak çoğu web tabanlı geri sayım sayacı için bu genellikle kabul edilebilir bir risktir.

Örnek Uygulama: Adım Adım Tam Bir Kod

Şimdiye kadar öğrendiklerimizi birleştirerek tam, çalışır bir örnek oluşturalım.

HTML Kodu (index.html)

    
    
    
    


    
Yeni Yıla Kalan Süre

    

        

            00
            
Gün
        
        

            00
            
Saat
        
        

            00
            
Dakika
        
        

            00
            
Saniye
        
    

    

        Mutlu Yıllar! Geri sayım sona erdi!
    

    

JavaScript Kodu (script.js)

// Hedef tarihi belirle (Örn: Bir sonraki yılbaşı)
// Yıl, Ay (0-11), Gün, Saat, Dakika, Saniye
// Yeni Yıl için bir sonraki 1 Ocak 00:00:00
function getNextNewYear() {
    const now = new Date();
    let year = now.getFullYear();
    if (now.getMonth() === 0 && now.getDate() === 1 && now.getHours() === 0 && now.getMinutes() === 0 && now.getSeconds() === 0) {
        // Eğer şu an tam yeni yıl ise, bir sonraki yılbaşını hedefle
        year++;
    } else if (now.getMonth() === 11 && now.getDate() === 31 && now.getHours() === 23 && now.getMinutes() === 59 && now.getSeconds() === 59) {
        // Eğer şu an tam yılbaşı gecesinin son saniyesi ise, bir sonraki yılbaşını hedefle
        year++;
    } else if (now.getMonth() === 0 && now.getDate() > 1) {
        // Eğer yeni yılın ilk günlerinden sonra isek, bir sonraki yılbaşını hedefle
        year++;
    }
    return new Date(year, 0, 1, 0, 0, 0).getTime();
}

const hedefTarih = getNextNewYear();

// HTML elementlerini seç
const gunlerEl = document.getElementById('gunler');
const saatlerEl = document.getElementById('saatler');
const dakikalarEl = document.getElementById('dakikalar');
const saniyelerEl = document.getElementById('saniyeler');
const geriSayimBittiMesajiEl = document.getElementById('geriSayimBittiMesaji');
const geriSayimSayaciEl = document.getElementById('geriSayimSayaci');

// Zaman birimleri için milisaniye değerleri
const birSaniye = 1000;
const birDakika = birSaniye * 60;
const birSaat = birDakika * 60;
const birGun = birSaat * 24;

// Sayıları iki haneli formatta göstermek için yardımcı fonksiyon
function ikiHaneYap(sayi) {
    return String(sayi).padStart(2, '0');
}

// Geri sayımı güncelleyen ana fonksiyon
function updateCountdown() {
    const simdi = new Date().getTime(); // Mevcut zamanı milisaniye cinsinden al
    let farkMilisaniye = hedefTarih - simdi;

    // Geri sayım bittiyse
    if (farkMilisaniye < 0) {
        clearInterval(sayacInterval); // Zamanlayıcıyı durdur
        geriSayimSayaciEl.style.display = 'none'; // Sayacı gizle
        geriSayimBittiMesajiEl.style.display = 'block'; // Bitti mesajını göster
        // İsteğe bağlı: Geri sayım bittiğinde yapılacak ek işlemler
        // console.log("Geri sayım sona erdi!");
        return; // Fonksiyondan çık
    }

    // Zaman farkını hesapla
    const gunler = Math.floor(farkMilisaniye / birGun);
    farkMilisaniye %= birGun; // Kalan milisaniyeleri güncelle

    const saatler = Math.floor(farkMilisaniye / birSaat);
    farkMilisaniye %= birSaat;

    const dakikalar = Math.floor(farkMilisaniye / birDakika);
    farkMilisaniye %= birDakika;

    const saniyeler = Math.floor(farkMilisaniye / birSaniye);

    // HTML elementlerini güncelle
    gunlerEl.innerHTML = ikiHaneYap(gunler);
    saatlerEl.innerHTML = ikiHaneYap(saatler);
    dakikalarEl.innerHTML = ikiHaneYap(dakikalar);
    saniyelerEl.innerHTML = ikiHaneYap(saniyeler);
}

// Sayacı hemen bir kere güncelle (ilk yüklemede doğru değerleri göstermek için)
updateCountdown();

// Her saniye güncellemek için setInterval kullan
const sayacInterval = setInterval(updateCountdown, 1000); // Her 1000 milisaniyede (1 saniye) bir çalıştır

// Sayfa gizlendiğinde veya kapatıldığında performansı optimize etmek için
document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        clearInterval(sayacInterval);
    } else {
        // Sayfa tekrar görünür olduğunda, zamanı yeniden senkronize et ve devam et
        // Bu, sekme değiştirildiğinde veya bilgisayar uykuya geçtiğinde zamanın kaymasını önler.
        updateCountdown();
        clearInterval(sayacInterval); // Eski interval'ı temizle
        sayacInterval = setInterval(updateCountdown, 1000);
    }
});

Bu örnek, CSS ile stil verilmiş, dinamik olarak bir sonraki yeni yılı hedefleyen ve sayfa görünürlüğü değiştiğinde performansı optimize eden eksiksiz bir geri sayım sayacı sunmaktadır. getNextNewYear fonksiyonu, mevcut tarihe göre akıllıca bir sonraki yılbaşını bulur. farkMilisaniye %= birGun; gibi modulo atamaları, kalan milisaniyeler üzerinden daha doğru hesaplamalar yapılmasını sağlar.

Sonuç

JavaScript ile geri sayım sayacı oluşturmak, Date nesnesinin gücünü, setInterval zamanlayıcısını ve temel matematiksel işlemleri bir araya getiren nispeten basit ama oldukça kullanışlı bir beceridir. Bu makalede, bir geri sayım sayacının temel mantığını adım adım öğrendik, gerekli HTML ve CSS yapılarını inceledik ve kapsamlı bir JavaScript çözümü oluşturduk.

Ayrıca, zaman dilimi farklılıkları, sayfa yenileme durumları ve performans gibi potansiyel sorunlara değinerek ve dinamik hedef tarih belirleme, duraklatma/devam ettirme ve callback fonksiyonları gibi gelişmiş özellikleri tartışarak, daha sağlam ve kullanıcı dostu sayaçlar inşa etme yollarını keşfettik.

Artık bu bilgileri kullanarak kendi web projelerinizde etkili ve işlevsel geri sayım sayaçları oluşturmaya hazırsınız. Unutmayın, pratik yapmak ve farklı senaryoları denemek, JavaScript yeteneklerinizi geliştirmenin en iyi yoludur.