2023-05-12 开启多语言插件支持……

jquery实现发送短信倒计时 60s

jquery 苏 demo 2373℃ 0评论

点击按钮,发送短信,然后倒计时,倒计时结束以后可以重新发送。

var step = 59;
$('#btn').val('重新发送60');
var _res = setInterval(function()
{
    $("#btn").attr("disabled", true);//设置disabled属性
    $('#btn').val('重新发送'+step);
    step-=1;
    if(step <= 0){
        $("#btn").removeAttr("disabled"); //移除disabled属性
        $('#btn').val('获取验证码');
        clearInterval(_res);//清除setInterval
    }
},1000);

 

PS:代码有些简单,不过可以非常容易的上手进行使用。

以下是补充部分:

<body>
<button id="btn" style="width:70px;">发送</button>
</body>
<script type="text/javascript">
    var test = {
    node:null,
       count:60,
       start:function(){
        //console.log(this.count);
        if(this.count > 0){
            this.node.innerHTML = this.count--;
            var _this = this;
            setTimeout(function(){
                _this.start();
            },1000);
        }else{
            this.node.removeAttribute("disabled");
            this.node.innerHTML = "再次发送";
            this.count = 60;
        }
    },
       //初始化
       init:function(node){
        this.node = node;
        this.node.setAttribute("disabled",true);
        this.start();
    }
    };
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert("发送成功...");
        test.init(btn);
    };
</script>

 

 

打赏

转载请注明:苏demo的别样人生 » jquery实现发送短信倒计时 60s

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)