js如何实现手机发送验证码功能
发布时间：-06-21 12:24:46
来源：亿速云
阅读：82
作者：小新
这篇文章将为大家详细讲解有关js如何实现手机发送验证码功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
效果图：
代码如下：html>
发送验证码倒计时功能
@charset"utf-8";
*{margin:0;padding:0;list-style:none}
body{background:#EBECED;font-family:'微软雅黑'}
.form{width:450px;height:auto;margin:100pxauto;overflow:hidden;font-size:16px;color:#1b1b1b;text-align:left;padding:50px;border:1pxsolid#ccc;border-radius:10px;}
.formdiv{padding:5px0;overflow:hidden;}
.formlabel{width:90px;display:block;float:left;}
.form.infos{width:200px;height:26px;line-height:26px;border:1pxsolid#BFBFBF;padding:2px;border-radius:4px;float:left;}
.form.div-phonea.send1{height:26px;text-decoration:none;line-height:26px;padding:2px;width:80px;background:#AA8926;font-family:'宋体';color:#fff;font-size:12px;text-align:center;display:block;float:left;border-radius:2px;margin-left:2px;-webkit-transition:all0.2slinear;-moz-transition:all0.2slinear;-ms-transition:all0.2slinear;-o-transition:all0.2slinear;transition:all0.2slinear;}
.form.div-phonea.send1:hover{text-decoration:none;background:#866c1b;-webkit-transition:all0.2slinear;-moz-transition:all0.2slinear;-ms-transition:all0.2slinear;-o-transition:all0.2slinear;transition:all0.2slinear;}
.form.div-phonea.send0{height:26px;text-decoration:none;line-height:26px;padding:2px;width:80px;background:#A1A1A1;font-family:'宋体';color:#fff;font-size:12px;text-align:center;display:block;float:left;border-radius:2px;margin-left:2px;}
.form.div-phonea.send0:hover{background:#A1A1A1;font-family:'宋体';color:#fff;font-size:12px;text-decoration:none;}
.formspan.error{height:26px;line-height:26px;padding:2px;width:100px;color:red;padding-left:20px;display:block;float:left;margin-left:10px;font-size:12px;font-family:'宋体';background:url(../images/error.png)no-repeatleftcenter;}
.form#phone{width:116px;}
.form.div-conform{padding-right:153px;}
.form.div-conforma.conform{width:136px;height:34px;display:block;text-align:left;overflow:hidden;background:url(../images/btn.jpg)no-repeat;float:right;text-indent:-1000px;}
用户名
手机
发送验证码
验证码
提交
varsends={
checked:1,
send:function(){
varnumbers=/^1\d{10}$/;
varval=$('#phone').val().replace(/\s+/g,"");//获取输入手机号码
if($('.div-phone').find('span').length==0&&$('.div-phonea').attr('class')=='send1'){
if(!numbers.test(val)||val.length==0){
$('.div-phone').append('手机格式错误');
returnfalse;
}
}
if(numbers.test(val)){
vartime=30;
$('.div-phonespan').remove();
functiontimeCountDown(){
if(time==0){
clearInterval(timer);
$('.div-phonea').addClass('send1').removeClass('send0').html("发送验证码");
sends.checked=1;
returntrue;
}
$('.div-phonea').html(time+"S后再次发送");
time--;
returnfalse;
sends.checked=0;
}
$('.div-phonea').addClass('send0').removeClass('send1');
timeCountDown();
vartimer=setInterval(timeCountDown,1000);
}
}
}
关于“js如何实现手机发送验证码功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
