最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jQuery手机验证码倒计时效果

来源:动视网 责编:小采 时间:2020-11-03 18:16:04
文档

jQuery手机验证码倒计时效果

jQuery手机验证码倒计时效果: 比较常用的一种效果,当点击获取手机验证码之后,会有一个倒计时的效果,一般是60秒开始到0就变为获取验证码,下面以5秒动画图片示例: HTML代码 <ul class=ulist> <li class=group> <label c
推荐度:
导读jQuery手机验证码倒计时效果: 比较常用的一种效果,当点击获取手机验证码之后,会有一个倒计时的效果,一般是60秒开始到0就变为获取验证码,下面以5秒动画图片示例: HTML代码 <ul class=ulist> <li class=group> <label c


比较常用的一种效果,当点击获取手机验证码之后,会有一个倒计时的效果,一般是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手机验证码倒计时效果

jQuery手机验证码倒计时效果: 比较常用的一种效果,当点击获取手机验证码之后,会有一个倒计时的效果,一般是60秒开始到0就变为获取验证码,下面以5秒动画图片示例: HTML代码 <ul class=ulist> <li class=group> <label c
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top