Пишу обратный отсчет до определенной даты. У меня есть конечная дата (31 декабря 2017) и текущая (она вычисляется каждый раз при перезагрузке страницы).
Соответсвенно у меня есть разница между датами в секундах:
var endTime = new Date('2017-12-31T23:59:59.999');
var timeDiff = Math.floor((endTime - new Date()) / 1000);
Я хочу выводить данные в виде X д. Y ч. Z мин. 𐌈 сек.. Как правильно это сделать?
Я пишу:
var sec = Math.floor((endTime - new Date()) / 1000);
var d = (sec / (60 * 60 * 24));
var h = sec / 3600 ^ 0;
var m = (sec - h * 3600) / 60 ^ 0;
var s = sec - h * 3600 - m * 60;
Но в итоге получается: 30.37553240740741 д. 729 ч. 00 мин. 46 сек.
Ответ
Мысль почти верная. Но в итоге достаточно поэтапно из общего числа секунд вычитать "крупные куски" начиная с дней и тогда при декомпозиции получится следующее:
// Наша конечная дата
const endTime = new Date('2017-12-31T23:59:59.999');
let timerDiv = document.getElementById('test');
setInterval(timer, 1000);
function timer() {
// Берем разницу дат в секундах
let delta = Math.floor((endTime - new Date()) / 1000);
// Вычисляем количество ПОЛНЫХ дней
let days = Math.floor(delta / 86400);
// А теперь вычитаем из секунд количество дней, выраженных в секундах
delta -= days * 86400;
// В оставшихся секунд вычленяем количество полных часов
let hours = Math.floor(delta / 3600) % 24;
// Также их потом вычитаем, выразив в секундах
delta -= hours * 3600;
// Из оставшихся секунд берем минуты
let minutes = Math.floor(delta / 60) % 60;
// Опять вычитаем
delta -= minutes * 60;
// И наконец секунды
// В теории деление по модулю на 60 не обязателен
let seconds = delta % 60;
// Итоговая дата
let dateStr = `${days} д. ${hours} ч. ${minutes} мин. ${seconds} сек.`;
timerDiv.innerText = dateStr;
}
А вообще для обратного отсчета можно взять плагин на чистом JS - countdownjs (см. демо http://countdownjs.org/demo.html), заменить английские буквы на русские и не париться :)
const endTime = new Date('2017-12-31T23:59:59.999'); const pageTimer = document.getElementById('pageTimer'); const counterStr = (ts) => pageTimer.innerHTML = `${ts.days} д. ${ts.hours} ч. ${ts.minutes} мин. ${ts.seconds} сек.`; countdown((ts) => counterStr(ts), endTime);
Комментариев нет:
Отправить комментарий