html+js 的一个倒计时程序_abap html js倒计时10秒代码-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript实现的倒计时功能，通过设置定时器和按钮控制，实现了倒计时的开启、重置和结束通知。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次是稀里糊涂地实现了这个功能，之后想复现的时候发现复现不出来[尴尬]。这次找到原来的代码，简单修改了一下，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div id="timerDiv">倒计时：未开始</div>
    <button id="startCountDownBtn">开启/重置倒计时</button>
</body>
<script>
    const TIME_LIMIT = 3600;// 设定倒计时3600s
    let timer = TIME_LIMIT;// 计时器变量
    let flag = false;// 用于标识倒计时开启/关闭状态，初始化时为“关闭”状态

    // 运行倒计时函数
    countDown();

    // 倒计时函数
    function countDown() {
        if (timer > 0) { // 当 timer > 0 时
            if (flag===true) { // 当倒计时处于“开启”状态时
                timer--;
                $('#timerDiv').html('倒计时：'+timer+'秒');
            }
            setTimeout(function () { // 间隔1秒，递归一次
                countDown();
            }, 1000);
        } else { // 当 timer <= 0 时，倒计时结束
            alert("会话已超时");
        }
    }

    // 点击“开启倒计时”按钮
    $("#startCountDownBtn").on('click', function () {
        flag = true; // 倒计时状态变为“开启”
        if (timer===0) { // 当 timer===0 时，重置 timer 并重新运行倒计时函数
            timer = TIME_LIMIT;
            countDown();
        } else { // 当 timer 不是 0 时，仅需重置 timer
            timer = TIME_LIMIT;
        }
    });
</script>
</html>