Как рассчитать время, оставшееся между текущим временем и установленным временем в javascript
вот фото фрагментаЯ хочу создать приложение для молитвы, в котором будет указано, сколько времени осталось между текущим временем и временем молитвы
Я попытался найти разницу напрямую, сделав это
prayers = [[13,59],
[13,30]];
let time = new Date();
let currprayer = new Date();
for (let index in prayers) {
currprayer.setHours(prayers[index][0])
currprayer.setMinutes(prayers[index][1])
if (currprayer.getTime() > time.getTime()){
currprayer.setSeconds(00)
let left = new Date(currprayer.getTime() - time.getTime() );
document.getElementById('nextmin').innerHTML = left.getMinutes()
document.getElementById('nexthrs').innerHTML = left.getHours()
document.getElementById('nextsec').innerHTML = left.getSeconds()
}
else{
console.info("nope")
}
}<div class = "details">
<div class = "next-prayer">
<span id = "nexthrs">00</span>
<span>:</span>
<span id = "nextmin">00</span>
<span>:</span>
<span id = "nextsec">00</span>
</div>
</div>но он постоянно зависает на 00:00:00
Я превратил ваш код в исполняемый фрагмент. Этот код работает нормально для меня. Он отображает ненулевые значения в элементах HTML. Я голосую за то, чтобы закрыть этот вопрос как невоспроизводимый.
я помещаю все это в установленный интервал с 10 миллисекундами
Это не то, что у вас есть в вопросе. Пожалуйста, отредактируйте свой вопрос и фрагмент, чтобы при его запуске проблема воспроизводилась.
он действительно отображается как проблема, он просто показывает 00:00:00, я добавил изображение для пояснения
Да, теперь это появляется, но это потому, что прошло несколько часов с тех пор, как вы разместили вопрос, и теперь время молитвы прошло... теперь условие if ложно. Нормальный. Завтра утром снова заработает :-D
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы можете получить метку времени обоих, вычесть их и преобразовать результат в новый формат даты, не так ли? Проверьте ссылку, чтобы сделать это: https://plainenglish.io/blog/how-to-convert-a-date-string-to-timestamp-in-javascript
Ответ должен содержать больше информации, а не просто ссылку. Однажды ссылка может умереть и сделать ответ бесполезным.
привет увидеть этот код,
let date1 = new Date();
let date2 = new Date(2023, 3, 17);
let diff = new Date(date2.getTime() - date1.getTime());
let times = diff.getTime(); // Gives time count of difference
const hours = (times / (1000*60*60)).toFixed(0);
console.info("remaining time = " + hours + " hours.");
Просто создайте функции remainingTime, которые вычисляют разницу между двумя значениями времени, а затем возвращают значения hours, minutes и seconds с одним объектом.
let remainingTime = (duration) => {
var seconds = Math.floor((duration / 1000) % 60),
minutes = Math.floor((duration / (1000 * 60)) % 60),
hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
return {hours: hours, minutes:minutes, seconds:seconds};
}
prayers = [[13,59],
[13,30]];
let time = new Date();
let currprayer = new Date();
for (let index in prayers) {
currprayer.setHours(prayers[index][0])
currprayer.setMinutes(prayers[index][1])
if (currprayer.getTime() > time.getTime()){
currprayer.setSeconds(00)
let left = remainingTime(currprayer.getTime() - time.getTime())
document.getElementById('nextmin').innerHTML = left.minutes;
document.getElementById('nexthrs').innerHTML = left.hours
document.getElementById('nextsec').innerHTML = left.seconds
}
else{
console.info("nope")
}
}<div class = "details">
<div class = "next-prayer">
<span id = "nexthrs">00</span>
<span>:</span>
<span id = "nextmin">00</span>
<span>:</span>
<span id = "nextsec">00</span>
</div>
</div>Проблема в том, что сегодняшние времена уже могут быть в прошлом. На вашем снимке экрана показано местное время 19:24, что, очевидно, позже, чем два времени, которые вы указали в массиве prayers. В этом случае вам следует искать время на следующий день.
Если в этом случае вы хотите иметь время до следующей молитвы на следующий день, добавьте еще одну запись в свой массив со временем, которое на 24 часа больше, чем первая запись. Чтобы это сработало, вы должны сначала убедиться, что время указано в хронологическом порядке (что не так в вашем примере фрагмента).
Вот как это можно сделать (см. комментарии в коде):
// Always define variables with const/let.
// Define the times in chronological order
const prayers = [[1,59], [4,39], [6,49], [13,45], [17,33], [20,41], [22,42]];
// Add one more for the next day, that is 24 hours more than first entry
prayers.push([prayers[0][0] + 24, prayers[0][1]]);
function refresh() {
const time = new Date();
const currprayer = new Date();
currprayer.setSeconds(0, 0);
for (const prayer of prayers) {
currprayer.setHours(...prayer); // Pass hours and minutes in one go
if (currprayer > time) break;
}
const left = new Date(currprayer - time);
// It's easier to format the time here and display it in one HTML element
// We use UK locale just to make sure the time format is hh:mm:ss
document.querySelector('.next-prayer').textContent = left.toLocaleTimeString("en-UK");
}
// Start the interval timer
setInterval(refresh, 200);
// Also refresh the page immediately
refresh();<div class = "details">
<div class = "next-prayer">
</div>
</div>
Как вы инициализируете
currprayerиtime?