“发送”按钮倒计时效果

1.相关html

<div class="verification-sms">
	<img class="cancel" src="./img/cancel.png"/>
	<p class="title">短信验证码</p>
	<p class="tip">验证码已发送,请及时查收</p>	
	<div class="getcodecon">
		<input class="validationcode" id="phoneCode" type="tel" placeholder="请输入验证码" maxlength="6">
		<img class="empty-img" id="emptyText" src="./img/empty.png"/>
		<span class="getcodebtn" id="getCode" class="getcode">获取验证码</span>
	</div>
	<!--*验证码输入错误-->
	<p class="prompts" style="visibility: visible;">*验证码输入错误</p>
	<!--<p class="but_submission">提交验证</p>-->
	<img class="but_submission" src="./img/submitValidation.png"/>
</div>

2.相关js

<script type="text/javascript">
	var flag = false;// 是否有效开关
	// 文本值清空
	$('#emptyText').click(function() {
		$('#phoneCode').val('')
	});
	
	// 点击获取验证码
	$('#getCode').click(function() {
		getPhoneCode();
	});
	// 获取短信验证码
	function getPhoneCode() {
		if (flag) {
			return;
		}
		//验证码
		var bank_code = $("#phoneCode").val();
		// 开户省份
		if (bank_code == "" || bank_code == null) {
			$('.prompts').css('visibility', 'visible');
			$('.prompts').html('*请输入验证码');
			return;
		}
		tt(60);
		$('#getCode').removeClass("getcodebtn").addClass("getingcodebtn");
		flag = true;//60s倒计时内点击,直接返回。转函数第一行
		$.ajax({
			url:"/H5.action?m=addFastMobilePhone",
			type:"post",
			data:{
				"bank_code":bank_code
			},
			dataType:"json",
			success:function( data ) {
				if (data.status == 0) {
					// 订单编号
					var order_no = data.data.order_no;
					$('#order_no').val(data.data.request_number);
				} else {
					$('.prompts').css('visibility', 'visible');
					$('.prompts').html(data.errMessage);
				}
			}
		});
	}
//	 * 倒计时
	function tt(t) {
		t -= 1;
		var cle = setTimeout(function() {
			tt(t);
		}, 1000);
		var t = t;// 计算差值
		if (t <= 0) {
			flag = false;
			$('#getCode').html('重新获取');
			$('#getCode').removeClass("getingcodebtn").addClass("getcodebtn");
			clearInterval(cle);
			return;
		}
		// var se = Math.floor( t / 1000 % 60 );
		// console.log(se)
		function dou(te) {// 当时间位数为1时,给前面拼接0
			if (te < 10) {
				te = '0' + te;
			}
			return te;
		}
		$('#getCode').html(dou(t) + 's后获取');
	}
</script>
posted @ 2019-05-29 11:51  missme_lina  阅读(310)  评论(0编辑  收藏  举报
喜欢就“全力以赴”,不对盘就“在下告辞”,原则是“可以辛苦,但不能委屈”。