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

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 type="litespeed/javascript">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 ";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.

Popular Eğitimler

CSS Carousel Logo Slider Efekti

Herhangi bir Java Script kodu kullanmadan, sadece CSS kullanarak HTML ve CSS…

CSS Yazı Tipi (Font) Özellikleri

Paragraflarda, başlıklarda, sayfa içerisindeki metinlerde yazı tiplerine nasıl müdahale edebileceğimiz, herhangi bir…

Etkili SEO Başlığı Nasıl Oluşturulur?

İçeriklerinizin kalitesi ne kadar yüksek olursa olsun aramalarda ziyaretçilerin ilk olarak başlıklar…

Portfolyo Sayfaları için JavaScript TypeWriter Efekti

Daha çok portfolyo veya ajans sitelerinde gördüğümüz tarzda bir daktilo yazım efekti…

Ücretsiz Cloudflare CDN Kurulumu, Kullanımı ve Ayarları

Cloudflare, ücretsiz CDN hizmeti veren bir firma ve web sitelerimizin performansını artırmayı…

jQuery Owl Carousel Gelişmiş Responsive Slider Kullanımı

Mobil cihazlarla uyumlu, responsive ve WordPress sitenize entegre edebileceğiniz bir slider arıyorsanız,…