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

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

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

QQ截图20160330184450


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;
});

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