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

Detaylı İçerik Arama

Herhangi bir filtre seçin ve sonuçları görmek için Uygula'ya tıklayın.

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>

Yeni yorum ekle

Günlükler