Comment calculer le temps restant entre l'heure actuelle et l'heure définie en JavaScript
P粉958986070
P粉958986070 2024-02-17 17:15:16
0
2
440

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

P粉958986070
P粉958986070

répondre à tous(2)
P粉099000044

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

P粉029327711

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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal