PHP导出礼拜时间到JavaScript实现多阶段倒计时问题

一、PHP到JavaScript的时间变量传递方案 #

你遇到的字符串转换问题，根源是直接序列化PHP的DateTime对象会输出类结构而非纯时间值。只需先把DateTime转成JS可直接解析的格式即可解决：

方法1：传递Unix时间戳（最稳妥） #

PHP端先把DateTime转成秒级时间戳，再用json_encode输出到JS：

// 假设已存在5个礼拜时间的DateTime对象
$prayerTimestamps = [
    'fajr' => $fajrDateTime->getTimestamp(),
    'dhuha' => $dhuhaDateTime->getTimestamp(),
    'dhur' => $dhurDateTime->getTimestamp(),
    'asr' => $asrDateTime->getTimestamp(),
    'maghrib' => $maghribDateTime->getTimestamp()
];

// 输出为全局JS变量
echo "<script>const prayerTimestamps = " . json_encode($prayerTimestamps) . ";</script>";

JS端转成Date对象（注意JS时间戳是毫秒级，需乘1000）：

const fajrTime = new Date(prayerTimestamps.fajr * 1000);

方法2：传递ISO 8601格式字符串 #

PHP用format('c')输出带时区的标准时间字符串，JS可直接解析：

$prayerTimes = [
    'fajr' => $fajrDateTime->format('c'),
    'dhuha' => $dhuhaDateTime->format('c'),
    'dhur' => $dhurDateTime->format('c'),
    'asr' => $asrDateTime->format('c'),
    'maghrib' => $maghribDateTime->format('c')
];

echo "<script>const prayerTimes = " . json_encode($prayerTimes) . ";</script>";

JS端直接实例化：

const fajrTime = new Date(prayerTimes.fajr);

二、多阶段自动切换的倒计时实现 #

核心逻辑是：实时检测当前时间，找到下一个未到来的礼拜时段，计算倒计时；当当前时间超过该时段时，自动切换到下一个阶段。

完整JS代码示例 #

// 从PHP传递的时间（这里用ISO格式示例，时间戳需自行转成Date）
const prayerTimes = {
    fajr: '2024-05-20T05:30:00+08:00',
    dhuha: '2024-05-20T09:00:00+08:00',
    dhur: '2024-05-20T13:15:00+08:00',
    asr: '2024-05-20T16:45:00+08:00',
    maghrib: '2024-05-20T19:10:00+08:00'
};

// 按时间先后顺序整理成数组
const orderedPrayers = [
    { name: 'Fajr', time: new Date(prayerTimes.fajr) },
    { name: 'Duha', time: new Date(prayerTimes.dhuha) },
    { name: 'Dhur', time: new Date(prayerTimes.dhur) },
    { name: 'Asr', time: new Date(prayerTimes.asr) },
    { name: 'Maghrib', time: new Date(prayerTimes.maghrib) }
];

// 获取下一个未到来的礼拜时段
function getNextPrayer() {
    const now = new Date();
    for (let prayer of orderedPrayers) {
        if (prayer.time > now) return prayer;
    }
    // 当天所有礼拜结束后，可返回次日Fajr或提示（按需调整）
    return orderedPrayers[0];
}

// 更新倒计时显示
function updateCountdown() {
    const nextPrayer = getNextPrayer();
    const now = new Date();
    let timeDiff = nextPrayer.time - now;

    // 倒计时结束时自动切换到下一个阶段
    if (timeDiff <= 0) {
        updateCountdown();
        return;
    }

    // 计算时分秒
    const hours = Math.floor(timeDiff / (1000 * 60 * 60));
    const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

    // 渲染到页面（假设页面有id为countdown的元素）
    document.getElementById('countdown').textContent = 
        `距离${nextPrayer.name}还有: ${hours}时 ${minutes}分 ${seconds}秒`;
}

// 初始化并每秒更新
updateCountdown();
setInterval(updateCountdown, 1000);

关键注意事项 #

• 确保PHP传递的时间包含时区信息（比如format('c')），避免JS解析时出现时区偏差
• 当天所有礼拜结束后，可根据需求修改getNextPrayer函数，比如显示次日Fajr时间或提示“今日礼拜已结束”
• 可添加样式切换逻辑，比如不同礼拜阶段对应不同的倒计时元素样式

内容的提问来源于stack exchange，提问作者Tips Tricks