jQuery实现倒计时效果

JavaScript / 2021年7月5日 / hamster

方法一：

<button id="button1">提交</button>

<script>
    $(function () {
        $("#button1").click(function () {
            daojishi_1();
        });

        var time_1 = 60;
        function daojishi_1() {
            if(time_1==0){
                $("#button1").html("提交");
                $("#button1").removeAttr("disabled");
                time_1=60;
                return;
            }else{
                $("#button1").attr("disabled","disabled");
                $("#button1").html("倒计时("+time_1+")");
                time_1--;
            }
            setTimeout(function () {
                daojishi_1();
            },1000)
        }

    })
</script>

方法二：

<button id="button2">提交</button>

<script>
    $(function () {
        var time_2 = 60;
        function daojishi_2() {
            if(time_2 == 60){
                var time=setInterval(function(){
                    if(time_2 == 0){
                        $("#button2").html("提交");
                        $("#button2").removeAttr("disabled");
                        time_2=60;
                        clearInterval(time);
                    }else{
                        $("#button2").attr("disabled","disabled");
                        $("#button2").html("倒计时("+time_2+")");
                        time_2--;
                    }
                }, 1000);
            }
        }

    })
</script>

Jquery