HTML Geri Sayım Kodu

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 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:

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.

6 Yorum

  1. MURAT AKIN demiş ki:

    ÇOK GÜZEL ÇALIŞIYOR TEŞEKKÜRLER.

    5 Haziran 2018
    Yanıtla
  2. Fatih demiş ki:

    Merhaba,
    Ben bu kodun hergün saat 17:20 için çalışmasını istiyorum.

    Web sitemizden saat 17:20’ye kadar gelen siparişleri sevk ediyoruz bu yüzden müşterilerimizi sipariş vermeleri için kalan süreyi göstermek istiyorum.

    25 Temmuz 2018
    Yanıtla
    • Tahsin Berk Ceylan demiş ki:

      Merhabalar,
      Bunu sizin için çözebiliriz.

      26 Temmuz 2018
      Yanıtla
  3. Aydın Duran demiş ki:

    geri sayım tarihini ve sistem tarihini girdiğim halde hata verdi… neden acaba ?
    ***********************************************

    var countDownDate = new Date(“25 09 2018 15:37:25”).getTime();

    var x = setInterval(function() {

    // Sistem saatini alıyoruz
    var now = new Date(“22 09 2018 16:32:25”).getTime();

    **********************

    22 Eylül 2018
    Yanıtla
    • selim YILMAZ demiş ki:

      Harika çalışıyor teşekkürler.
      ***********************************************

      // BURADA HATA VAR new Date(“09 25 2018 15:37:25”) olması gerekiyor AY GÜN YIL ŞEKLİNDE
      var countDownDate = new Date(“25 09 2018 15:37:25”).getTime();

      var x = setInterval(function() {

      // Sistem saatini alıyoruz
      var now = new Date(“22 09 2018 16:32:25”).getTime();

      **********************

      6 Şubat 2019
      Yanıtla
  4. Alaaddin ÜSTÜN demiş ki:

    Başarılı bir kod editörler her zaman değerlendirir bu kodu tabiki 😀

    22 Şubat 2019
    Yanıtla

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir