<html>
<div class="weui-cell weui-cell_vcode login">
<div class="weui-cell__hd">
<label class="weui-label">手机号</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="tel" placeholder="请输入手机号" id="mobile" >
</div>
</div>
<div class="weui-cell weui-cell_vcode login">
<div class="weui-cell__hd">
<label class="weui-label">验证码</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="tel" placeholder="请输入验证码" id="code">
</div>
<div class="weui-cell__ft">
<button class="weui-vcode-btn" id="getCode">获取</button>
<!--当点击获取时，60秒后重新发送-->
<button class="weui-vcode-btn" id="timeCode">60秒</button>
</div>
</div>
<script>
//隐藏倒计时按钮
$("#timeCode").hide();
//点击获取验证码
$("#getCode").click(()=>{
//获取手机号
var mobile=$("#mobile").val();
// 手机号正则
var reg=/^1[3|4|5|7|8][0-9]{9}$/;
if(reg.test(mobile)){
//调用倒计时函数
reserveCode();
}else {
alert("手机号格式错误")
}
});
function reserveCode(){
//显示60s倒计时，隐藏‘获取验证码’
var time=0;
//倒计时-打开
$("#timeCode").show();
//获取-隐藏
$("#getCode").hide();
timer=setInterval(function(){
time=parseInt($("#timeCode").html());
time--;
$("#timeCode").html(time+"秒");
//60s后停止定时器
if(time==0){
$("#timeCode").html("60秒").hide();
$("#getCode").show();
clearInterval(timer);
}
},1000)
}
网友评论