JavaScript定时器倒计时60S的使用

最新推荐文章于 2022-06-27 16:31:48 发布

JavaAhao

最新推荐文章于 2022-06-27 16:31:48 发布

阅读量3.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript jquery

本文链接：https://blog.youkuaiyun.com/qq_48642210/article/details/123669815

前端专栏收录该内容

3 篇文章

订阅专栏

这篇博客通过一个实例展示了如何使用JavaScript实现点击按钮后开始60秒倒计时，并在计时结束后恢复按钮功能。主要涉及的技术包括DOM操作、setInterval和clearInterval方法。

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

启用定时器 setInterval(function，毫秒数)
删除定时器 clearInterval(定时器对象);

案例：

点击按钮后开始倒计时60s
倒计时期间禁用按钮
计时结束后恢复按钮

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>
    <input type="button" value="点击开始" id="btn">
</body>

<script>
    var time = 60;
    $("#btn").click(function() {
        $("#btn").prop("disabled", true)
        var t = setInterval(function() {
            if (time > 0) {
                $("#btn").val("请认真阅读" + "(" + --time + ")秒");
            } else {
                clearInterval(t);
                $("#btn").val("再来一次");
                $("#btn").prop("disabled", false)
                time = 60;
            }
        }, 1000);
    })
</script>
</html>