我有两个演示，一个带演示，一个不带演示
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.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>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);});但是，如果您想要一个更精确的计时器，但只是稍微复杂一点：
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>现在，我们已经做了一些非常简单的计时器，我们可以开始考虑可重用性和分离关注点了。为此，我们可以问“倒数计时器应该做什么？”
- 倒数计时器应该倒数吗？ 是
- 倒数计时器应该知道如何在DOM上显示自己吗？ 没有
- 倒数计时器在达到0时应该知道重新启动吗？ 没有
- 倒数计时器是否应该为客户提供剩余时间的方式？ 是
因此，请记住这些事情，让我们写出更好的（但仍然非常简单）
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 };};那么，为什么这种实现比其他实现更好呢？以下是一些您可以使用它的示例。请注意，除了第一个示例以外，其他所有
startTimer功能均无法实现。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）