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">
<img src="loading.gif"><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

Facebook Yorumları

12 Yorum

  1. 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..

  2. Emre

    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 .

  3. Bahadır

    Ö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…

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

Bir Cevap Yazın

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