HTML Geri Sayım Kodu

HTML Geri Sayım Kodu : HTML kodları içinde karşılaştığımız gerek sayfa açılışlarında gerekse bir ürünün geri sayımı için piyasaya sürülme tarihi beklerken çeşitli sitelerde örneklerini gördüğümüz geri sayımları bu yazımızda kodlarını örnekli bir şekilde kurumsal web tasarım içinde sizlerle paylaşmaya çalışacağım. Bunun yanı sıra dilediğiniz proje de veya yapım aşamasında sayfasında da bu örneği değiştirip kullanabilirsiniz.

Geri sayım kodları bir bitiş tarihine göre çalışmaktadır. Sayfayı açtığınız zaman o bitiş tarihine göre geri sayımı jQuery vb bir dil ile hareketlendirebilirsiniz.

Not: Bu yazımız ile ilgili bizimle iyi veya kötü yorumlarınızı paylaşırsanız sitemizin gelişmesine yardımcı olabilirsiniz. (Ayrıca sponsorlu bağlantıları ziyaret ederek sitemizin yayınlanmaya devam etmesini sağlayabilirsiniz.)

Geri Sayım Nerelerde Kullanılır?

Geri sayım genellikle yapım aşamasında sitenin belirli bir tarihte açılmasını beklenen siteler için yapılmaktadır. Bunun yanı sıra bir ürün, sınav tarihleri ve sınav açıklanma tarihi de geri sayım kapsamına girmektedir. Kullanım alanları projenize göre değişkenlik göstermektedir. Ben size aşağıda belirli kullanım alanlarını listeliyorum.

  • Sayfamız yapım aşamasında sayfası
  • Ürün piyasaya sürülme geri sayımı
  • Sınav tarihleri (aöf sayfasında örneği mevcuttur)
  • Sınav açıklama tarihleri
Geri Sayım Sayacı Nasıl Yapılır?
Geri Sayım Sayacı Nasıl Yapılır?

 

Geri Sayım Çalışma Mantığı

Geri sayım mantığı konusuna gelecek olursak kısaca kod içinde geri sayımın biteceği tarih yer almaktadır. Siz tarayıcıda Web sitesini açtığınız zaman sitede sabit olan tarihe bir geri sayım başlatmaktadır. Genel çalışma mantığı geri sayımlar için bu şekildedir.

Geri sayımın biteceği tarih tercihen veri tabanına yazıp oradan veriyi çekebilirsiniz.

 

HTML Geri Sayım Kodu Örneği

Geri sayım örneği 2 parçadan oluşmaktadır. Yapılan bu örneği HTML ve jQuery olarak 2 basamakta inceleyebiliriz. HTML bölümü sitenin gösterileceği alanı belirler. jQuery içinde dinamik geri sayım işlemini gerçekleştirmektedir.

Aşağıda uygulama olarak sizlere bu kodun basamak basamak nasıl çalıştığını anlatıp kodu yazacağım.

Kod:

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  text-align: center;
  font-size: 55px;
  margin-top:30px;
}
</style>
</head>
<body>

<div id="gerisayim"></div>

<script>
var countDownDate = new Date("05 10 2018 15:37:25").getTime();

var x = setInterval(function() {

    // Sistem saatini alıyoruz
    var now = new Date().getTime();
    
    // Geri sayımla şimdi saat arasındaki zamanı ölçüyoruz
    var distance = countDownDate - now;
    
    // Gün, Saat, Dakika, Saniye işlemleri yapılıyor
    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);
    
    // Anlık olarak id="gerisayim" içine aktarılıyor
    document.getElementById("gerisayim").innerHTML = days + "gün " + hours + "saat "
    + minutes + "dakika " + seconds + "saniye ";
    
    // Süre dolduğunda yazacak yazı.
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("gerisayim").innerHTML = "Süre doldu";
    }
}, 1000);
</script>

</body>
</html>

Açıklama: Html geri sayım kodu örneğini sizlere hazırlarken geri sayım tekniklerini çeşitli sitelerden araştırdım. Gün, saat, dakika ve saniye olarak anlık olarak göstermektedir. Countdown kodu ile dilediğiniz gibi oynama yapabilir projelerinizde kullanabilirsiniz. Bu örneği daha iyi anlamanız için kodun içine açıklama satırları ekledim.

Geri sayım kodu veya her hangi bir Web sitesi konusu sorularınız için aşağıdaki form üzerinden sorularınızı bana ulaştırabilirsiniz. Sizlere en kısa süre içinde yardımcı olmaya çalışacağım. Herkese şimdiden iyi çalışmalar diliyorum.

HTML Geri Sayım Kodu
Etiketlendi: