jquery实现按钮倒数7秒后才可以点击

最新推荐文章于 2023-03-25 13:12:50 发布

笑戏人间

最新推荐文章于 2023-03-25 13:12:50 发布

阅读量6k

点赞数

分类专栏： html+css jquery 文章标签： jquery html

本文链接：https://blog.youkuaiyun.com/qq_38256963/article/details/79364186

版权

html+css 同时被 2 个专栏收录

4 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript结合jQuery实现的计时器功能，该功能可以使按钮在指定时间内处于禁用状态，并显示剩余时间。适用于前端网页开发中控制用户操作频率等场景。

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

方法一：

<input type="button" value="下一步" id="button" disabled>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    var i=7;
    var timehwnd=setInterval("Countdown()",1000);
    function Countdown(){
        i--;
        if(i == 0){
            $("#button").val("下一步");
            $("#button").removeAttr("disabled");
            clearInterval(timehwnd);
        }else{
            $("#button").val("下一步("+i+")");
        }
    }
</script>

方法二:

<input type="button" value="下一步" id="button" disabled>

var second = 7;
var time = setInterval(function(){
    if(second>0){
        $("#button").val("下一步("+second+"s)");
        second--;
    }else{
        $("#button").val("下一步");
        $("#button").removeAttr("disabled");
        clearInterval(time);
    }
},1000);