使用jQuery实现倒计时计时器遇问题：无法在p标签正常显示数字

原代码核心问题 #

• 元素创建后立即销毁：每次执行timer函数时，刚把<p>标签添加到页面就立刻删除，导致页面无法显示任何内容。
• HTML标签转义错误：创建元素时使用了<p>转义字符，jQuery无法识别为合法的<p>标签，应该直接写<p>。
• 数值更新顺序错误：初始值是60，但先执行number -= 1再更新内容，导致第一次显示59，跳过了60。
• 定时器停止条件不合理：当number === 1时停止，会停在1而不是0，不符合从60递减到0的需求。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
    // 初始化数值
    var number = 60;
    // 页面加载完成后创建一次标签
    $(function() {
        $('body').append('<p id="number"></p>');
        // 先显示初始值60
        $('#number').text(number);
    });
    // 启动定时器
    const MyTimer = setInterval(timer, 1000);

    function timer() {
        number -= 1;
        $('#number').text(number);
        // 数值到0时停止定时器
        if (number === 0) {
            clearInterval(MyTimer);
        }
    }

    // 60秒后触发提示（正好对应从60到0的时长）
    const myTimeout = setTimeout(response, 60000);

    function response() {
        alert("timer is out");
    }
</script>
</head>
<body>
</body>
</html>

修复说明 #

1. 标签只创建一次：在页面初始化时创建<p id="number">，避免重复创建销毁的无效操作。
2. 修正数值更新逻辑：先显示初始值60，之后每次定时器触发时先递减数值再更新显示，保证计数顺序正确。
3. 调整停止条件：当数值变为0时清除定时器，确保计数完整覆盖60到0的范围。
4. 优化超时提示时间：把超时时间改为60000毫秒，和计时器时长完全匹配。

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