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>

Merhaba hocam şöyle bir kod var bunu butonla nasıl yapabilirim bir çok örnek denedim butona basınca 1 kez geri sayım yapıyor tamamlandıktan sonra tekrar butona basınca geri sayım başlamıyor yardımınız için şimdiden teşekkürler.

<script>

var initialSecs = 65;
var currentSecs = initialSecs;
setTimeout(decrement,1000);
function decrement()
{var displayedSecs = currentSecs%60;
var displayedMin = Math.floor(currentSecs/60)%60;
if(displayedMin <= 9)
displayedMin = "0" + displayedMin;
if(displayedSecs <= 9)
displayedSecs = "0" + displayedSecs;
currentSecs--; document.getElementById("timerText").innerHTML = displayedMin + ":" + displayedSecs;
if(currentSecs>-1)setTimeout(decrement,1000);}

</script>

<div id="timerText"></div>

Butona basınca neler olmasını istediğinizi daha detaylı yazarsanız sevinirim. Buradan anladığım geri sayım 0'a gelince butona basılacak ve geri sayım yeniden 65 saniyeden mi başlayacak?

Aynen hocam söylediğiniz gibi butona basınca 65 saniyeden geri saymaya başlayacak süre dolunca tekrar butona basınca yine 65 saniyeden geri saymaya başlayacak ilginiz için teşekkürler.

Kodları aşağıdaki gibi düzenledim ve istediğiniz gibi oldu sanırım:

<script>
var initialSecs = 65;
var currentSecs = initialSecs;
setTimeout(decrement,1000);
function decrement()
{
    var displayedSecs = currentSecs%60;
    var displayedMin = Math.floor(currentSecs/60)%60;
    if(displayedMin <= 9)
    displayedMin = "0" + displayedMin;
    if(displayedSecs <= 9)
    displayedSecs = "0" + displayedSecs;
    currentSecs--; document.getElementById("timerText").innerHTML = displayedMin + ":" + displayedSecs;
    if(currentSecs>-1)
    setTimeout(decrement,1000);
    if(currentSecs<0)
    document.getElementById("yenile").style.display='block';
    if(currentSecs>1)
    document.getElementById("yenile").style.display='none';
    return;
};
function yenile()
{
    displayedSecs = 65;
    currentSecs = 65;
    decrement();
    return;
}
</script>
<div id="timerText"></div>
<button id="yenile" onClick="yenile()" style="display:none;">Baştan Başla</button>

Teşekkürler hocam olmuş elinize sağlık.

Rica ederim, yardımcı olabildiğime sevindim...

Sosyal Medyada Bizi Takip Edin

Günlükler

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