JavaScript实现短信发送时候的倒计时功能Demo

  •   
  • 4543
  • jQuery
  • 10
  • super_dodo
  • 2016/03/30

在网站注册的时候，需要发送短信验证码，短信验证码一般都会延迟一下，所以当点击了该按钮后一般都会给一个倒计时的功能，一方面提示用户短信验证码的发送情况，一方面禁止用户短时间内重复点击造成不必要的开销和疑惑。先前想到用for循环，没有很顺畅。直接上代码段。各位小伙伴们自行领悟。方法里面执行本方法。

QQ截图20160330184450

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var wait = 60;              //60秒倒计时
var isClick = 0;            //是否已经点击过
 
function timeDesc() {       //倒计时
    if(wait == 0) {
        wait = 60;
        isClick = 0;
        $('#getSmsCode').text('获取验证码');
    }else{
        wait--;
        isClick = 1;
        $('#getSmsCode').text('重新获取'+wait);
        setTimeout(function(){timeDesc()},1000);
    }
}
 
 
//发送短信验证码--注册
$('#getSmsCode').click(function(){
    if(isClick == '1'){ return false; }         //禁止点击
    var phone = $.trim($('#phone').val());      //用户名
    if(!checkMobile(phone)){
        alert("请输入正确的11位的手机号码");
        $('#phone').focus();
        return false;
    }else{  //是手机号码
        var postUrl = 'codecodecodecodeurl';
        $.getJSON(postUrl, {phone:phone}, function(json){
            alert(json.msg);        //弹出失败的提示信息--成功的时候再倒计时(需改进)
            timeDesc();
        });
    }
    return false;
});

我走过最危险的路，就是你的套路！刚从绝望中走出来，又陷入另一个深渊。