Признаюсь, я не совсем уверен, с какими начальными проблемами столкнулся ваш код.
Но так как вы определяете отношения своих единиц на расстоянии одного уровня (мс => сек => минут => часов => дней), вам может оказаться более понятным сохранить эту реляционную логику в своем коде.
Изначально у вас есть расстояние в ms
между вашими двумя датами.
Затем вы можете рассчитать общее число your_seconds , которое представляет это расстояние, используя ваше собственное определение секунды (ms_per_sec
в фрагменте ниже). Оттуда вы можете подойти к количеству дней.
Тогда вам просто нужно получить модуль суммы по заданной вами базе.
Обратите внимание, что, поскольку вы сейчас не имеете дело с реальными секундами Земли, вам придется обрабатывать цикл анимации на другой базе, отличной от setInterval(fn, 1000)
, поскольку там может быть некоторая your_seconds
, которая может упасть на две разные реальные секунды . Вместо этого лучше использовать цикл requestAnimationFrame , который будет срабатывать при каждом обновлении экрана.
// our constants
var ms_per_sec = 300; // 1000
var sec_per_min = 7; // 55.54920598892;
var min_per_hr = 3; // 55.54920598892;
var hrs_per_day = 28;
// let's make our target date at some fixed distance in our own time system
var countDownDate = new Date().getTime() +
(1 * hrs_per_day * min_per_hr * sec_per_min * ms_per_sec) + // 1 day
(2 * min_per_hr * sec_per_min * ms_per_sec) + // two hours
(1 * sec_per_min * ms_per_sec) + // 1 minutes
(5 * ms_per_sec); // 5 seconds
// Update the count down every frame
function loop() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var total_ms = (countDownDate - now);
// from here our values are based on our own time system
var total_seconds = (total_ms / ms_per_sec);
var total_minutes = (total_seconds / sec_per_min);
var total_hours = (total_minutes / min_per_hr);
var total_days = (total_hours / hrs_per_day);
var days = Math.floor(total_days);
var hours = Math.floor(total_hours % hrs_per_day);
var minutes = Math.floor(total_minutes % min_per_hr);
var seconds = Math.floor(total_seconds % sec_per_min);
// Output the result in an element with id="demo"
document.getElementById("demo").textContent = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (total_ms < 0) {
document.getElementById("demo").innerHTML = "EXPIRED";
return;
}
requestAnimationFrame(loop);
}
loop();
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
<p id="demo"></p>