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>