jQuery手机验证码倒计时效果

比较常用的一种效果,当点击获取手机验证码之后,会有一个倒计时的效果,一般是60秒开始到0就变为“获取验证码”,下面以5秒动画图片示例:

HTML代码:

<ul class="ulist">
<li class="group">
<label class="label" for="phone">联系电话:</label>
<div class="controls">
<input type="text" id="phone" class="txt">
</div>
</li>
<li class="group">
<label class="label" for="code">验证码:</label>
<div class="controls">
<input type="text" id="code" class="txt">
<button class="btn btn-small get-code" onclick="getCode(this)" id="J_getCode">获取验证码</button>
<button class="btn btn-small reset-code" id="J_resetCode" style="display:none;"><span id="J_second">60</span>秒后重发</button>
</div>
</li>
</ul>

jQuery代码:

/*获取验证码*/
var isPhone = 1;
function getCode(e){
	checkPhone(); //验证手机号码
	if(isPhone){
		resetCode(); //倒计时
	}else{
		$('#phone').focus();
	}
	
}
//验证手机号码
function checkPhone(){
	var phone = $('#phone').val();
	var pattern = /^1[0-9]{10}$/;
	isPhone = 1;
	if(phone == '') {
		alert('请输入手机号码');
		isPhone = 0;
		return;
	}
	if(!pattern.test(phone)){
		alert('请输入正确的手机号码');
		isPhone = 0;
		return;
	}
}
//倒计时
function resetCode(){
	$('#J_getCode').hide();
	$('#J_second').html('5');
	$('#J_resetCode').show();
	var second = 5;
	var timer = null;
	timer = setInterval(function(){
		second -= 1;
		if(second >0 ){
			$('#J_second').html(second);
		}else{
			clearInterval(timer);
			$('#J_getCode').show();
			$('#J_resetCode').hide();
		}
	},1000);
}

在线演示地址:

演示

原文链接:jQuery手机验证码倒计时效果 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/daojishi.html)

发表评论

请登录后发表评论:

“jQuery手机验证码倒计时效果”有18个评论

  1. doinnext

    没有防刷新

    登录回复
  2. LoveBearTD

    n看着挺好的,试试

    登录回复
  3. mingbaiwo

    看着挺好的,试试

    登录回复
  4. Zz鞋屋

    不错

    登录回复
  5. A雷影

    不错,正需要

    登录回复
  6. 前端开发博客

    试试

    登录回复
  7. z_Lien

    试试

    登录回复
  8. 糖果雨ryf

    试试

    登录回复
  9. 卑鄙的泡面

    貌似重新获取 开始的时间不对啊

    登录回复
  10. xmskying

    试试

    登录回复
  11. 但愿你被这世界温柔相待

    好博客,感觉特别有用!

    登录回复
  12. 起司猫issocute

    看看看。。。。

    登录回复
  13. i李攀

    特来学习学习。

    登录回复
  14. 浙江极限天空

    正好碰到这个问题,来学习一下

    登录回复
  15. 扰乱了红尘

    进来学习学习

    登录回复
  16. 长春织梦创想

    未来看看~~~~~~~~~~~~~

    登录回复