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.

lokmanbas tarafından 11 Ekim 2018 - 10:24 tarihinde gönderildi
Blog Kategori: 
Web Tasarım

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>

javascript
Geri Sayım
Durdur
Başlat
Devam Et
İlginizi Çekebilir: 

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

lokmanbas tarafından 11 Ekim 2018 - 10:11 tarihinde gönderildi
Web Tasarım

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

Yeni yorum ekle