使用定时器写一个发送验证码倒计时
2018-12-27 本文已影响0人
菜菜___
登录、注册的时候获取验证码是最常见的场景了，今天记录用定时器写一个倒计时的效果，效果图如下：
实际开发中一般为60s或者120s有效时间，此例为了演示假设为6，代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button{
display: block;
margin: 50px auto;
width: 150px;
height: 40px;
line-height: 36px;
border: 2px solid #0742fe;
border-radius: 5px;
font-size: 18px;
text-align: center;
background-color: transparent;
}
</style>
</head>
<body>
<button type="button" id="sendSms" class="send-sms" onclick="sendSmsCode()">发送验证码</button>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js" ></script>
<script>
/**校验手机号*/
function checkPhone(tel){
if(/^1(3[0-9]|4[57]|5[0-35-9]|7[0-9]|8[0-9]|9[8-9]|66)\d{8}$/.test(tel)){
return true;
}
return false;
}
/**发送验证码*/
function sendSmsCode(){
if($("#sendSms").attr("disabled")){
return;
}
var phone = "18212345678";
if (!checkPhone(phone)) {
alert("请输入正确手机号");
return;
}
$.ajax({
url:"请求地址",
type:"post",
dataType:"json",
data : {
phone : phone
},
success:function(data){
if (data.code != 1) {
/*接口返回错误信息*/
alert(data.msg);
}else{
/**发送验证码成功，启动定时器 */
var index = 6;
$("#sendSms").text(index + 'S');
/*使按钮不可点，也可加自定义属性进行控制*/
$("#sendSms").attr("disabled",true);
var timer = setInterval(function () {
if (--index <= 0) {
$("#sendSms").text('发送验证码');
$("#sendSms").attr("disabled",false);
/*清除定时器*/
clearInterval(timer)
} else {
$("#sendSms").text(index + 'S');
}
}, 1000);
}
}
});
}
</script>
</body>
</html>
