如何计算JavaScript中当前时间和设定时间之间的剩余时间
P粉958986070
P粉958986070 2024-02-17 17:15:16
0
2
357

这是片段的照片我想创建一个祈祷应用程序,它可以告诉您当前时间与祈祷时间之间还剩多少时间

我试图通过这样做直接找到差异

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>

但它一直卡在 00:00:00

P粉958986070
P粉958986070

全部回复(2)
P粉099000044

您可以获取两者的时间戳,将它们相减并将结果转换为新的日期格式,不是吗?检查链接来执行此操作: https://plainenglish.io/博客/如何将日期字符串转换为 JavaScript 中的时间戳

P粉029327711

问题是今天的时代可能已经成为过去。您的屏幕截图显示当地时间 19:24,这显然比 prayers 数组中的两个时间晚。在这种情况下,您应该查找第二天的时间。

如果在这种情况下您想在后一天下一次祈祷之前有时间,请在数组中再添加一个条目,其时间比第一个条目多 24 小时。为此,您必须首先确保时间按时间顺序列出(示例代码片段中的情况并非如此)

以下是您可以执行此操作的方法(请参阅代码中的注释):

// 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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!