Geri Sayım Sayacı Kodu (HTML ve JS)

YouTube'ta Takip Et →

Geri sayım kodlarını genellikle yapım aşaması sayfalarında sitenin açılacağı zamanı, bir kampanyanın veya promosyonun kalan süresini veya sınav sonuçları ya da çekiliş sonuçları gibi sonuçları görüntülemek için görebiliyoruz. Ziyaretçilerin ve kullanıcıların bu açıdan bilgilendirilmesi, sonuç bekleyen ziyaretçiler için oldukça önemli.

Öncelikle aşağıdaki kodu sayfamızda, geri sayımın görüneceği satıra ekleyelim. Burada geri sayımlar görünecek.

<p id="countdown"></p>

Aşağıdaki kodları da script alanına eklediğimiz zaman geri sayım aracımız çalışacaktır. Dikkat etmeniz geren şey ilk satırdaki tarihi düzenlemeniz. Sistem, bu tarih ve saate göre geri sayma aracını çalıştıracaktır. Tarih sistemi ay, gün, yıl ve saat olarak kullanıldığını da hatırlatayım.

 <script>var countDownDate = new Date("07 11 2021 20:32:55").getTime();
 
var x = setInterval(function() {
 
    var now = new Date().getTime();
    
    var distance = countDownDate - now;
    
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById("countdown").innerHTML = days + "gün " + hours + "saat "
    + minutes + "dakika " + seconds + "saniye ";
    
    // Tamamlandı yazısı
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown").innerHTML = "TAMAMLANDI";
    }
}, 1000);</script> 

HTML koduna çeşitli sınıflar atayarak CSS ile fontları, rengi, boyutu gibi tipini belirleyen değerler üzerinde düzenleme yaparak sayfanıza uygun hale getirebilirsiniz.