Asp Geri Sayım (Countdown) Sayacı Fonksiyonu
ASP ile Basit ve Şık Geri Sayım (Countdown) Sayacı Yapımı
Web projelerinde bazen belirli bir tarihe ne kadar kaldığını göstermemiz gerekir. Bir ürün lansmanı, yeni yıl kutlaması veya sitenizin bakım süreci için geri sayım (countdown) modülleri oldukça işlevseldir.
Bugün, klasik ASP (Active Server Pages) kullanan projelerinizde veya ödevlerinizde kullanabileceğiniz, sunucu tabanlı çalışan basit bir geri sayım fonksiyonunu paylaşacağım.
Javascript ile yapılan sayaçların aksine, ASP sunucu tabanlı çalıştığı için ziyaretçinin bilgisayar saatini değil, sunucu saatini baz alır. Bu da daha tutarlı bir sonuç verir.
ASP Geri Sayım Fonksiyonunun Mantığı
Bu işlem için VBScript’in meşhur DateDiff fonksiyonunu kullanacağız. Bu fonksiyon, iki tarih arasındaki farkı (saniye, dakika veya gün cinsinden) almamıza yarar.
İşte projenize ekleyebileceğiniz hazır kod bloğu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<% Function GeriSayim(HedefTarih) Dim Simdi, FarkSaniye, Gun, Saat, Dakika, Saniye, Kalan, SonucHTML ' Sunucu saatini al Simdi = Now() ' Hedef tarih ile şu an arasındaki farkı saniye cinsinden bul FarkSaniye = DateDiff("s", Simdi, HedefTarih) ' Eğer tarih geçtiyse mesaj göster If FarkSaniye <= 0 Then GeriSayim = "Süre Doldu!" Exit Function End If ' Saniyeyi Gün, Saat, Dakika cinsine çevir Gun = Int(FarkSaniye / 86400) Kalan = FarkSaniye Mod 86400 Saat = Int(Kalan / 3600) Kalan = Kalan Mod 3600 Dakika = Int(Kalan / 60) Saniye = Kalan Mod 60 ' Sonucu biçimlendir (HTML Çıktısı) SonucHTML = "" SonucHTML = SonucHTML & "<div class='sayac-kutu'>" SonucHTML = SonucHTML & "<span>" & Gun & " Gün </span>" SonucHTML = SonucHTML & "<span>" & Saat & " Saat </span>" SonucHTML = SonucHTML & "<span>" & Dakika & " Dakika </span>" SonucHTML = SonucHTML & "</div>" GeriSayim = SonucHTML End Function %> |
Sayfanızda Nasıl Kullanırsınız?
Yukarıdaki fonksiyonu sayfanızın en üstüne (veya bir include dosyasına) ekledikten sonra, sayacı göstermek istediğiniz yere aşağıdaki tek satırlık kodu yazmanız yeterlidir.
Örneğin, 2026 yılına girmemize ne kadar kaldığını göstermek için:
|
1 |
<%= GeriSayim("01/01/2026 00:00:00") %> |
Görünümü Güzelleştirelim (CSS)
ASP kodu bize veriyi verir, ancak bunu şık göstermek CSS’in işidir. Fonksiyonun çıktısının güzel görünmesi için stil dosyanıza (style.css) şu kodları ekleyebilirsiniz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.sayac-kutu { background: #f39c12; /* Turuncu arka plan */ color: #fff; padding: 15px; border-radius: 8px; font-family: 'Arial', sans-serif; text-align: center; font-size: 18px; font-weight: bold; display: inline-block; } .sayac-kutu span { margin: 0 5px; padding: 5px 10px; background: rgba(0,0,0,0.1); /* Hafif gölgelendirme */ border-radius: 4px; } |
Neden DateDiff Kullanıyoruz?
ASP’de tarih hesaplamalarının kalbi DateDiff fonksiyonudur.
"s"parametresi iki tarih arasındaki farkı saniye olarak verir."d"yapsaydık sadece gün farkını verirdi.- Biz en hassas sonucu almak için saniye üzerinden hesaplama yapıp, matematiksel işlemle (Modülo) bunu gün ve saate çevirdik.
Eski ama sağlam teknolojilerle çalışmayı sevenler için umarım faydalı bir kod parçası olmuştur.