Tôi có hai bản demo, một có jQueryvà một không có. Không sử dụng các hàm ngày và đơn giản như nó được.
Bản trình diễn với JavaScript vani
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>
Bản trình diễn với jQuery
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);
});
Tuy nhiên, nếu bạn muốn một bộ đếm thời gian chính xác hơn chỉ phức tạp hơn một chút:
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>
Bây giờ chúng tôi đã thực hiện một vài bộ tính giờ khá đơn giản, chúng tôi có thể bắt đầu suy nghĩ về khả năng sử dụng lại và tách các mối quan tâm. Chúng ta có thể làm điều này bằng cách hỏi "đồng hồ đếm ngược nên làm gì?"
- Có nên đếm ngược thời gian đếm ngược? Đúng
- Bộ đếm thời gian đếm ngược có nên biết cách hiển thị trên DOM không? Không
- Bộ đếm thời gian đếm ngược có nên tự khởi động lại khi nó về 0 không? Không
- Có nên hẹn giờ đếm ngược cung cấp một cách để khách hàng truy cập bao nhiêu thời gian còn lại? Đúng
Vì vậy, với những điều này trong tâm trí, hãy viết tốt hơn (nhưng vẫn rất đơn giản) 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
};
};
Vậy tại sao việc thực hiện này tốt hơn những người khác? Dưới đây là một số ví dụ về những gì bạn có thể làm với nó. Lưu ý rằng tất cả trừ ví dụ đầu tiên không thể đạt đượcstartTimer hàm.
Một ví dụ hiển thị thời gian ở định dạng XX: XX và khởi động lại sau khi đạt 00:00
Một ví dụ hiển thị thời gian ở hai định dạng khác nhau
Một ví dụ có hai bộ định thời khác nhau và chỉ có một lần khởi động lại
Một ví dụ bắt đầu đồng hồ đếm ngược khi nhấn nút