美文网首页
JQuery 实现 点击倒计时

JQuery 实现 点击倒计时

作者: RiverCrab | 来源:发表于2017-09-20 23:08 被阅读0次

    请求短信验证后,60秒内不能再次点击
    例子:
    HTML代码
    <button type='button' title='点击发送短信'>点击发送短信</button>

    JS代码

    $('button').click(function(){
                //点击发送后,禁止点击
                $('button').attr('disabled',true);
                //设定时间为60秒
                nums=60;
                //定时器设定变量名,便于清除
                clock = setInterval(doLoop, 1000);
    }
    function doLoop(){
                nums--;
                if(nums > 0){
                   $('button').html(nums);
                   $('button').attr('title',nums+'秒后重新发送');
                }else{
                    //时间为0时,清除定时器,可以再次点击发送短信
                    clearInterval(clock); //清除js定时器
                    $('button').attr('disabled',false);
                    $('button').attr('title','点击重新发送');
                    $('button').html('点击发送短信');
                }
    }
    

    相关文章

      网友评论

          本文标题:JQuery 实现 点击倒计时

          本文链接:https://www.haomeiwen.com/subject/euyasxtx.html