WordPress重复倒计时计时器无法正常工作求助

需求是在WordPress站点实现每周日重复的双倒计时，分别指向当天上午9:30和11:00，但现有代码仅HTML正常显示，JavaScript未生效。

常见失效原因排查 #

• WordPress的JS安全与加载机制：默认会过滤不安全的inline脚本，主题/插件的JS优化（如延迟加载、合并压缩）也可能导致脚本执行时机错误。
• 原代码逻辑问题：目标时间设为21:00，未适配9:30和11:00的双时间点需求；setInterval("tick()",1000)的字符串调用方式在严格环境下易报错。
• DOM执行时机错误：body onload在WordPress主题中可能早于DOM元素加载完成，导致无法获取到倒计时的DOM节点。

修复后的完整实现方案 #

1. 替换原有JavaScript代码（适配双时间点+修复执行问题） #

// 全局变量：保存两个倒计时的定时器引用
let countdownTicker1;
let countdownTicker2;

// 初始化两个倒计时
function initCountdowns() {
    updateCountdown('timer1', 9, 30); // 第一个倒计时：周日9:30
    updateCountdown('timer2', 11, 0); // 第二个倒计时：周日11:00
}

// 计算并更新单个倒计时的时间差
function updateCountdown(timerId, targetHour, targetMinute) {
    const now = new Date();
    const currentDay = now.getDay(); // 0=周日，1=周一...6=周六
    let targetDate;

    // 确定目标时间：如果是周日且未到目标时间，用当天；否则用下周日
    if (currentDay === 0) {
        targetDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), targetHour, targetMinute);
        // 若当前时间已过当天目标时间，切换到下周日
        if (now > targetDate) {
            targetDate.setDate(targetDate.getDate() + 7);
        }
    } else {
        // 计算距离下周日的天数
        const daysToSunday = 7 - currentDay;
        targetDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + daysToSunday, targetHour, targetMinute);
    }

    // 计算时间差（转换为秒）
    const diffSeconds = Math.floor((targetDate.getTime() - now.getTime()) / 1000);

    // 启动倒计时更新
    startSingleCountdown(timerId, diffSeconds);
}

// 启动单个倒计时的定时器
function startSingleCountdown(timerId, totalSeconds) {
    // 先清除已有定时器，避免重复执行
    const ticker = timerId === 'timer1' ? countdownTicker1 : countdownTicker2;
    if (ticker) clearInterval(ticker);

    // 立即更新一次显示
    updateTimerDisplay(timerId, totalSeconds);

    // 设置每秒更新逻辑
    const newTicker = setInterval(() => {
        totalSeconds--;
        if (totalSeconds <= 0) {
            clearInterval(newTicker);
            // 倒计时结束后重新初始化，进入下一轮循环
            initCountdowns();
            return;
        }
        updateTimerDisplay(timerId, totalSeconds);
    }, 1000);

    // 保存定时器引用
    if (timerId === 'timer1') {
        countdownTicker1 = newTicker;
    } else {
        countdownTicker2 = newTicker;
    }
}

// 更新倒计时的DOM显示
function updateTimerDisplay(timerId, totalSeconds) {
    const days = Math.floor(totalSeconds / 86400);
    const remainingSeconds = totalSeconds % 86400;
    const hours = Math.floor(remainingSeconds / 3600);
    const minutes = Math.floor((remainingSeconds % 3600) / 60);
    const seconds = remainingSeconds % 60;

    // 格式化数字，补前导0
    const formatNum = num => num.toString().padStart(2, '0');

    // 更新对应DOM元素
    document.getElementById(`${timerId}-days`).textContent = days;
    document.getElementById(`${timerId}-hours`).textContent = formatNum(hours);
    document.getElementById(`${timerId}-minutes`).textContent = formatNum(minutes);
    document.getElementById(`${timerId}-seconds`).textContent = formatNum(seconds);
}

// 等待DOM完全加载后初始化倒计时
document.addEventListener('DOMContentLoaded', initCountdowns);

2. 对应的HTML结构（可添加到WordPress自定义HTML块） #

<div class="countdown-container">
    <h6>距离周日上午9:30还有：
        <span id="timer1-days"></span>天
        <span id="timer1-hours"></span>:
        <span id="timer1-minutes"></span>:
        <span id="timer1-seconds"></span>
    </h6>
    <h6>距离周日上午11:00还有：
        <span id="timer2-days"></span>天
        <span id="timer2-hours"></span>:
        <span id="timer2-minutes"></span>:
        <span id="timer2-seconds"></span>
    </h6>
</div>

3. WordPress中添加的注意事项 #

• 不要直接修改主题的body标签添加onload，而是通过古腾堡编辑器的自定义HTML块插入上述JS和HTML代码。
• 如果主题有JS过滤机制，可将JS代码通过wp_add_inline_script添加到主题的functions.php，或使用Code Snippets类插件添加脚本，避免被安全插件拦截。
• 若需要美化样式，可添加自定义CSS调整倒计时的字体、间距等显示效果。

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