Biri olan jQueryve olmayan iki demo var . İkisi de tarih işlevlerini kullanmaz ve neredeyse o kadar basit değildir.
Vanilya JavaScript ile demo
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>
JQuery ile demo
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 5,
display = $('#time');
startTimer(fiveMinutes, display);
});
Ancak, biraz daha karmaşık olan daha doğru bir zamanlayıcı istiyorsanız:
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// does the same job as parseInt truncates the float
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 05:00 not 04:59
start = Date.now() + 1000;
}
};
// we don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time"></span> minutes!</div>
</body>
Şimdi birkaç basit zamanlayıcı yaptığımıza göre, yeniden kullanılabilirlik ve endişeleri ayırma üzerine düşünmeye başlayabiliriz. Bunu "geri sayım sayacı ne yapmalı?" Diye sorarak yapabiliriz.
- Geri sayım sayacı geri saymalı mı? Evet
- Geri sayım sayacı DOM'da nasıl görüntüleneceğini bilmeli mi? Hayır
- Geri sayım sayacı 0'a ulaştığında kendini yeniden başlatmayı bilmeli midir? Hayır
- Geri sayım sayacı, bir müşterinin ne kadar süre kaldığına erişmesi için bir yol sağlamalı mıdır? Evet
Bu şeyler göz önünde bulundurularak daha iyi (ama yine de çok basit) yazalım CountDownTimer
function CountDownTimer(duration, granularity) {
this.duration = duration;
this.granularity = granularity || 1000;
this.tickFtns = [];
this.running = false;
}
CountDownTimer.prototype.start = function() {
if (this.running) {
return;
}
this.running = true;
var start = Date.now(),
that = this,
diff, obj;
(function timer() {
diff = that.duration - (((Date.now() - start) / 1000) | 0);
if (diff > 0) {
setTimeout(timer, that.granularity);
} else {
diff = 0;
that.running = false;
}
obj = CountDownTimer.parse(diff);
that.tickFtns.forEach(function(ftn) {
ftn.call(this, obj.minutes, obj.seconds);
}, that);
}());
};
CountDownTimer.prototype.onTick = function(ftn) {
if (typeof ftn === 'function') {
this.tickFtns.push(ftn);
}
return this;
};
CountDownTimer.prototype.expired = function() {
return !this.running;
};
CountDownTimer.parse = function(seconds) {
return {
'minutes': (seconds / 60) | 0,
'seconds': (seconds % 60) | 0
};
};
Peki bu uygulama neden diğerlerinden daha iyi? İşte onunla neler yapabileceğinize dair bazı örnekler. İlk örnek dışındaki tüm öğelerin startTimerişlevlerle gerçekleştirilemeyeceğini unutmayın.
Saati XX: XX biçiminde görüntüleyen ve 00: 00'a ulaştıktan sonra yeniden başlayan bir örnek
Zamanı iki farklı biçimde gösteren bir örnek
İki farklı zamanlayıcıya ve yalnızca bir yeniden başlatmaya sahip bir örnek
Bir düğmeye basıldığında geri sayım zamanlayıcısını başlatan bir örnek