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

Facebook Yorumları

12 Yorum

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