如何用JavaScript计算下一个礼拜时间的剩余倒计时时长

我帮你排查出代码里几个关键问题，这些就是导致你无法得到正确剩余时间的原因，咱们一步步修正：

核心问题梳理 #

• 变量名笔误：Asr时段的代码里用了countDownDatenow，但其他逻辑里都是countDownDate，这会直接导致计算出错。
• 时间差方向搞反：Maghrib和Isha的计算里，你用当前时间减礼拜时间，这样得到的是负数，正确的应该是礼拜时间减去当前时间，才能得到剩余的毫秒数。
• Fajr时段逻辑错误：Fajr是当天最早的礼拜，当当前时间在Isha之后（比如22:00），原来的判断countDownDate > IshaTimeAF && countDownDate <= FajrTimeAF不成立（22肯定大于3），这时候应该计算第二天的Fajr时间。
• 变量作用域问题：distance是每个分支的局部变量，最后统一判断distance < 0会失效，因为只能拿到最后一个分支的值。

修正后的完整代码 #

// Update the count down every 1 second
var x = setInterval(function() {
    // 获取当前时间的时间戳（毫秒）
    var countDownDate = new Date().getTime();
    // 假设这些变量是已经转换好的当天各礼拜时间的时间戳（毫秒）
    // 示例：FajrTimeAF = new Date().setHours(3,5,0,0); 以此类推

    let nextPrayerTime = null;
    let prayerName = "";

    // 逐个判断当前时间处于哪个区间，确定下一个礼拜时间
    if (countDownDate < FajrTimeAF) {
        // 当前时间在Fajr之前，下一个是今天的Fajr
        nextPrayerTime = FajrTimeAF;
        prayerName = "FAJR";
    } else if (countDownDate < DhuhrTimeAF) {
        nextPrayerTime = DhuhrTimeAF;
        prayerName = "DHUHR";
    } else if (countDownDate < AsrTimeAF) {
        nextPrayerTime = AsrTimeAF;
        prayerName = "ASR";
    } else if (countDownDate < MaghribTimeAF) {
        nextPrayerTime = MaghribTimeAF;
        prayerName = "MAGHRIB";
    } else if (countDownDate < IshaTimeAF) {
        nextPrayerTime = IshaTimeAF;
        prayerName = "ISHA";
    } else {
        // 当前时间在Isha之后，下一个是第二天的Fajr
        nextPrayerTime = FajrTimeAF + 86400000; // 加一天的毫秒数（24*60*60*1000）
        prayerName = "FAJR (NEXT DAY)";
    }

    // 计算剩余时间
    var distance = nextPrayerTime - countDownDate;
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // 显示剩余时间和礼拜名称
    document.getElementById("ComingSoon").innerHTML = `${hours}h ${minutes}m ${seconds}s - UPCOMING PRAYER ${prayerName}`;

    // 如果倒计时结束（理论上不会触发，因为会自动切换到下一个礼拜）
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("ComingSoon").innerHTML = "EXPIRED";
    }
}, 1000);

关键优化说明 #

1. 简化判断逻辑：不用写双向区间判断，只需要判断当前时间是否小于某个礼拜时间，从上到下依次匹配，逻辑更清晰。
2. 处理跨天场景：当所有当天礼拜都结束后，自动计算第二天的Fajr时间，解决了深夜时段的倒计时问题。
3. 统一时间差计算：只在确定下一个礼拜时间后，统一计算剩余时间，避免重复代码和计算错误。
4. 显示礼拜名称：把礼拜名称和剩余时间一起显示，更直观。

你可以测试下这个代码，比如当前时间是6:50，会自动匹配到Dhuhr（13:10），计算出剩余6小时20分左右的时间，应该就能得到正确结果了。

内容的提问来源于stack exchange，提问作者MR.alaa