Comment calculer le temps restant entre l'heure actuelle et l'heure définie en JavaScript

Question

Voici une photo du fragment. Je souhaite créer une application de prière qui vous indique combien de temps il reste entre l'heure actuelle et l'heure de prière

J'ai essayé de trouver la différence directement en faisant ceci

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.log("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>

Mais il reste bloqué à 00:00:00

Answer 1

Vous pouvez obtenir les horodatages des deux, les soustraire et convertir le résultat dans un nouveau format de date, n'est-ce pas ? Vérifiez le lien pour ce faire : https://plainenglish.io/blog/Comment convertir une chaîne de date en horodatage en JavaScript

Answer 2

Le problème est que l’époque actuelle appartient peut-être au passé. Votre capture d'écran montre 19h24, heure locale, ce qui est évidemment plus tard que les deux heures du tableau prayers. Dans ce cas, il faut rechercher l'heure du lendemain.

Si dans ce cas vous voulez du temps avant la prochaine prière un jour ajoutez une autre entrée dans le tableau avec 24 heures de plus que la première. Pour ce faire, vous devez d'abord vous assurer que les horaires sont classés par ordre chronologique (ce qui n'est pas le cas dans l'exemple d'extrait)

Voici comment procéder (voir commentaires dans le code) :

// 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>