How to calculate remaining time between current time and set time in JavaScript
P粉958986070
P粉958986070 2024-02-17 17:15:16
0
2
428

This is a photo of the fragment I want to create a prayer app that tells you how much time is left between the current time and the prayer time

I tried to find the difference directly by doing this

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>

But it keeps getting stuck at 00:00:00

P粉958986070
P粉958986070

reply all(2)
P粉099000044

You can get the timestamps of both, subtract them and convert the result to a new date format, can't you? Check the link to do this: https://plainenglish.io/blog/How to convert date string to timestamp in JavaScript

P粉029327711

The problem is that today’s era may be a thing of the past. Your screenshot shows 19:24 local time, which is obviously later than the two times in the prayers array. In this case, you should look for the next day's time.

If in this case you want to have time before the next prayer one day later , add another entry in the array with a time 24 hours more than the first one. To do this, you must first ensure that the times are listed in chronological order (which is not the case in the example snippet)

Here's how you can do this (see comments in the 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>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template