Вот несколько способов создания таймера обратного отсчета JavaScript:
Метод 1: использование setInterval
function countdownTimer(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);
}
// Usage
var countdownDisplay = document.getElementById("countdown");
var countdownDuration = 180; // 3 minutes
countdownTimer(countdownDuration, countdownDisplay);
Метод 2: использование setTimeout
function countdownTimer(duration, display) {
if (duration < 0) {
return;
}
display.textContent = formatTime(duration);
if (--duration >= 0) {
setTimeout(function () {
countdownTimer(duration, display);
}, 1000);
}
}
function formatTime(time) {
var minutes = Math.floor(time / 60);
var seconds = time % 60;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
return minutes + ":" + seconds;
}
// Usage
var countdownDisplay = document.getElementById("countdown");
var countdownDuration = 180; // 3 minutes
countdownTimer(countdownDuration, countdownDisplay);
Метод 3. Использование объектов Date
function countdownTimer(endTime, display) {
var timerInterval = setInterval(function () {
var currentTime = new Date().getTime();
var distance = endTime - currentTime;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (distance < 0) {
clearInterval(timerInterval);
display.textContent = "00:00";
}
}, 1000);
}
// Usage
var countdownDisplay = document.getElementById("countdown");
var countdownEndTime = new Date().getTime() + 180000; // 3 minutes
countdownTimer(countdownEndTime, countdownDisplay);