Question 42637 in Html Question posted in
Some basic documentation can be found here.

How do i calculate the time remaining between the current time and a set time in javascript – Html

heres a photo of the snippetI want to create a prayer app where it tells you how much time is left between current time and the time of the prayer

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 on 00:00:00

Tags:

4

Answers


  1. 0

    You can get the timestamp of both, substract them and transform the result into a new Date format can’t you? Check the link to do it:
    https://plainenglish.io/blog/how-to-convert-a-date-string-to-timestamp-in-javascript

    Login or Signup to reply.
  2. 0

    hi see this code,

    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.log("remaining time =" + hours + " hours.");
    Login or Signup to reply.
  3. 0

    Just create remainingTime functions that calculate differences between two times and then return hours, minutes, and seconds values with a single object.

    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.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>
    Login or Signup to reply.
  4. 0

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

    If in that case you want to have the time until the next prayer the day after, then add one more entry to your array, with a time that has 24 hours more than the first entry. For this to work you must first make sure the times are listed in chronological order (which is not the case in your example snippet)

    Here is how you could do that (see comments in 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search