Cara mengira baki masa antara masa semasa dan masa yang ditetapkan dalam JavaScript

Question

Ini adalah foto serpihan yang saya ingin buat aplikasi solat yang memberitahu anda berapa banyak masa yang tinggal antara waktu semasa dan waktu solat

Saya cuba mencari perbezaan secara langsung dengan melakukan ini

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>

Tetapi ia terus tersekat pada 00:00:00

Answer 1

Anda boleh mendapatkan cap masa kedua-duanya, tolakkannya dan tukar hasilnya kepada format tarikh baharu, bukan? Semak pautan untuk melakukan ini: https://plainenglish.io/blog/Cara menukar rentetan tarikh kepada cap masa dalam JavaScript

Answer 2

Masalahnya ialah zaman hari ini mungkin sudah berlalu. Tangkapan skrin anda menunjukkan 19:24 waktu tempatan, yang jelas lewat daripada dua kali dalam tatasusunan prayers. Dalam kes ini, anda harus mencari masa keesokan harinya.

Jika dalam kes ini anda mahukan masa sebelum solat seterusnya satu hari tambah satu lagi entri dalam array dengan 24 jam lebih masa daripada yang pertama. Untuk melakukan ini, anda mesti terlebih dahulu memastikan masa disenaraikan dalam susunan kronologi (yang tidak berlaku dalam coretan contoh)

Begini cara anda boleh melakukannya (lihat komen dalam kod):

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