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>
Yorumlar
merhaba hocam başlat
merhaba hocam başlat butonunun işlevi yok.Sayfa yüklendiğinde otomatik geri sayıyor.
Merhabalar. Kodlarınızı
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
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ı
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
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
Kodları aşağıdaki gibi düzenledim ve istediğiniz gibi oldu sanırım:
Teşekkürler hocam olmuş
Teşekkürler hocam olmuş elinize sağlık.
Rica ederim, yardımcı
Rica ederim, yardımcı olabildiğime sevindim...