Javascript – Geri sayım / Yönlendirme Scripti

raadol

Üye
Üye
Katılım
30 Ağu 2017
Mesajlar
54
Beğeniler
10
Puanları
8
#1
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: BULUT FORUM - Türkiye'nin Sosyal Ağı
// URL: https://bulutforum.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.
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:
 

Ekli dosyalar

Aynı Kategoriden Farklı Konular

Üst