Javascript İle Geri Sayım (Durdur/Başlat/Devam Et)

-A A +A

Blog Kategori: 

Sayfanızda bir geri sayım sayacı görüntülemek istiyorsunuz. Ama bu sayacı istediğiniz an başlatıp, istediğiniz an durdurup istediğiniz an devam ettirmek istiyorsunuz. O zaman aşağıdaki kodları <body> ..... </body> tagleri arasına yerleştirebilirsiniz.

Sayacın görüneceği yere;

<span id="timer"></span>

kodunu yerleştirin.

Başlat / Duraklat / Devam Et düğmelerini yerleştireceğiniz yere;

<button id="start">Başlat</button>
<button id="pause">Duraklat</button>
<button id="resume">Devam Et</button>

kodlarını yerleştiriniz.

Script kodunu da bunlardan sonraki herhangi bir yere yerleştiriyoruz. Bu kodlar sayfada görünmez sadece etkisini görürüz.

<script language="javascript">
// Burada düğmelerin ve sayacın tanımlamaları var
var timer = document.getElementById("timer");
var start = document.getElementById("start");
var pause = document.getElementById("pause");
var resume = document.getElementById("resume");
var id;
var value = "00:00";

function startTimer(m, s) {
    timer.textContent = m + ":" + s;
    
    // Eğer süre bittiğinde bir sayfaya yönlendirmek istiyorsanız bu kodları yerleştiriniz (istemiyorsanız yönlendirme bitişe kadar olan yeri silebilirsiniz
    if (s == 0) {
        // Eğer yönlendirmeden önce bir uyarı göstermek istiyorsanız (istemiyorsanız satırı silebilirsiniz)
        alert ('lokmanbas.net sayfasına yönleniyorsunuz');
        // Yönlendirme kodu
        window.location.href = "http://www.lokmanbas.net";       
            return;
    }
    // Yönlendirme ve uyarı bitişi
    
    if (s == 0) {
        if (m == 0) {
            return;
        } else if (m != 0) {
            m = m - 1;
            s = 60;
        }
    }
            
    s = s - 1;
    id = setTimeout(function () {
        startTimer(m, s)
    }, 1000);
}

function pauseTimer() {
    value = timer.textContent;
    clearTimeout(id);
}

function resumeTimer() {
    var t = value.split(":");

    startTimer(parseInt(t[0], 10), parseInt(t[1], 10));
}
    startTimer(0, 30); // Buraya zamanlamanın ne kadar olduğunu yazıyorsunuz. Örn. 5 dakika 30 saniye için startTimer(5, 30); şeklinde
pause.addEventListener("click", pauseTimer, false);
resume.addEventListener("click", resumeTimer, false);
</script>

İlginizi Çekebilir: 

Javascript İle Geri Sayım Yapma ve Sonunda Bir Sayfaya Yönlenme

Bir sayfanız var ve farzedelimki bu sayfada belirli bir sürede cevaplanması gereken soru var. Bu süre boyunca işlem gerçekleşmezse sayfayı başka bir sayfaya yönlendirmek ya da bir uyarı iletisi göstermek için sayfanıza aşağıdaki javascript kodunu <body>...</body> tagleri arasına yerleştirebilirsiniz.

<span id="sayac"></span> (Sayacın görüntülenmesini istediğiniz yere bu span kodunu yerleştirmelisiniz.)

Yorumlar

merhaba hocam başlat butonunun işlevi yok.Sayfa yüklendiğinde otomatik geri sayıyor.

Merhabalar. Kodlarınızı buraya ekleyebilirseniz yardımcı olabilirim. Eklemeniz gereken kodları tekrar hatırlatayım;
<span id="sayac"></span> (Sayacın görüntülenmesini istediğiniz yere bu span kodunu yerleştirmelisiniz.)
<script language="javascript">
<!--
// Buraya kaç saniyelik bir geri sayım yapmak istediğinizi yazıyorsunuz //
var zaman=31
function gerisayim(){
if (zaman!=0){
zaman-=1
document.getElementById('sayac').innerHTML=zaman
}
else{
    // Süre bittiğinde gerçekleşecek işlemler //
window.location.href = "BURAYA ADRES GELECEK"; // Buraya adres gelecek örn. http://www.lokmanbas.net veya /anasayfa.html gibi //
alert ('BURASI SAYFADA GÖRMEK İSTEDİĞİNİZ UYARI YAZISI İÇİN'); // Buraya da sayfada göstermek istediğiniz uyarıyı yazınız. Eğer bir mesaj / uyarı göstermek istemezseniz bu satırı silebilirsiniz //
return
}
setTimeout("gerisayim()",1000)
}
gerisayim()
//-->
</script>

Yeni yorum ekle

Detaylı İçerik Arama

Sonuçları görmek için UYGULA butonuna tıklayınız.

Zircon - This is a contributing Drupal Theme
Design by WeebPal.