Javascript – Geri sayım / Yönlendirme Scripti

raadol · 28 Şub 2020

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

JavaScript:

// Javascript – Geri sayım / Yönlendirme Scripti
// SITE: Bilgi Port - Türkiye'nin Bilgi ve Eğlence Portu
// URL: https://bilgiport.net/

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.

Kod:

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

Kod:

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

Scriptin çalışan örneği:

Linkleri görmek için Giriş yap veya üye ol.