html+js 的一个倒计时程序

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

<!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>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页