Javascript – Geri sayım / Yönlendirme Scripti

html-codeBen dahil bir çok internet kullanıcısı uyuz olsa da bazen siteyi sömüren bandwith düşmanlarının bir nebze olsun önünü kesmek veya bazen sadece belirli bir süre reklam görüntülemek için “lütfen bekleyin, içerik x saniye sonra görüntülenecek…” veya “lütfen bekleyin, içerik yükleniyor…” şeklinde ifade edilen zamanlayıcı uygulamalar gerekli olabiliyor. Bana da yüksek çözünürlüklü bir resim arka planda yüklenirken o esnada 5 saniye boyunca reklam görüntülemek için bir script gerekli oldu. Hazırladığım script ile isterseniz sayfa değişmeden içeriğinizi yükletebilir, isterseniz x saniye sonra sayfayı başka bir yere yönlendirebilirsiniz.

Javascript ile sayfa değişmeden “yükleniyor” mesajı vermek:
Öncelikle bir timer.js dosyası hazırlayıp içerisine aşağıdaki kodları ekliyoruz.

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
// Timer/Loading Scripti
// Yazar: Caner ÖNCEL
// Url: http://www.egonomik.com

var sure = 10; // kaç saniye bekletilecek
var saniye=document.getElementById("kalan").innerHTML = sure+ 1;

function showMe(blockId)  {    
    document.getElementById(blockId).style.display = "block";  }  
function hideMe(blockId)  {    
    document.getElementById(blockId).style.display = "none";  }
function goster() {
    showMe('resim');
    hideMe('reklam');  }

function final(){
  if (saniye!=1){
    saniye-=1;
    document.getElementById("kalan").innerHTML  = saniye;   }

  else{
    goster();
    return;   }
  setTimeout("final()",1000);
}
final();

Daha sonra gizli bir <div> konteyner atayıp yüklenmesini istediğimiz içeriği içine ekliyoruz

1
<div id="resim" style="display:none">- Görüntülenecek İçerik -</div>

Ardından söz konusu içerik yüklenirken ekranda görüntülemek istediğimiz loading mesajını hazırlıyoruz

1
2
3
4
5
<div id="reklam">
<br>
İçerik <b><span id="kalan"></span></b> saniye içerisinde gösterilecek
<script language="javascript" src="timer.js"></script>
</div>

Hepsi bu kadar, gerekli yerleri isteğinize göre düzenleyebilirsiniz.

Scriptin çalışan örneği:
Demo

Script dosyaları:
Download

İlginizi Çekebilecek Diğer İçerikler

12 Yorum

  1. ugokhan dedi ki:

    Teşekkür ederim. Güzel ve açıklayıcı bir anlatım olmuş.

  2. orhan dedi ki:

    gerçekten işime çok yaradı. Teşekkürler

  3. NaMLu dedi ki:

    Hocam Geri Sayım ve POST etme Olayını Anlatabilir Misiniz?

  4. NaMLu dedi ki:

    Süre bittiğinde benim istediğim verileri otomatik olarak istediğim dosyaya veriyi post etcek hocam.

  5. sonkan dedi ki:

    Canerim bununla ilgili bir sorunum var script sorunsuz çalışıyor ama ben şunu yapmak istiyorum; aynı sayfada iki adet nasıl yapabilirim yapıyorum kodun biri çalışıyor diğeri çalışmıyor yani şunu söylemek istiyorum birincisi 15 saniye süresi olacak ve birinci içeriği göstericek – ikincisi 20 saniye sürecek ve ikinci içeriği göstericek yani bunların ikiside aynı sayfada olacak..

  6. Kudret Çayıroğlu dedi ki:

    Google’da ararken nerde bulduk iyi mi :D

  7. Emre dedi ki:

    Hocam örnek şimdi ben bunu yazdım -içerik burada- dediği kısıma . Örnek hesabınıza eklendi yazdım ve tik işareti ekledim. Sonra örnek ptc scriptleri filan için nasıl yapıcam yani bu reklama bakıcak arkadaş 10 saniye geri sayıcak (başka bir yere tıklarsa başka sekme filan sayaç dursa süper olur) sonra saniye bitince hesabınıza eklendi yazısı çıkıcak. Bittiğide gibide hesabına örneğin 0.05 TL eklenicek filan bu para miktarı değişicek bazı reklamlarda filan nasıl ayarlayabiliriz anlatır mısınız teşekkürler .

  8. Bahadır dedi ki:

    Öncelikle elinize sağlık herşey çok iyi fakat ben süreyi değiştirdim fakat yine 10 dan geriye sayıyo yardımcı olabilirmisiniz…

  9. Eray dedi ki:

    Hocam adamın dibisiniz Allah’ınıza kurban olayım sizin çok işime yaradı :)

  10. SusmaBe dedi ki:

    Aradığım buna benzer bişi idi ama buda ilgilimi çekti tşkler

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Eray için bir cevap yazın Cevabı iptal et

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