众所周知在前段的工作中注册信息或获取当前手机号信息等需求，我们基本上都要涉及到手机号验证码，在网络上搜索的案例杂乱无章，用的时候全是坑，真心不想用了，然后自己写了一个获取手机验证码的倒计时效果。有需求的伙伴们可以看看怎么实现的。

小月不知道大家是利用什么平台去获取验证码的，但是告诉大家我是在哪个平台获取的。

LeanCloud：https://leancloud.cn/

文档：https://leancloud.cn/docs/sms_guide-js.html

在这个平台首先去要注册一个账号，在设置里面设置自己的信息按照文档去操作就可以了这里不多说了，大部分是后台去操作些接口的，我们前端有能力的可以自己去尝试用php去写接口。（懒惰的我是不会写。）

一般是两个接口：

发送验证请求（这样你的手机会受到短信验证哦）

返回数据验证手机号和验证是否一致

根据后台攻城狮的接口去实现吧。

下面这段代码就是上图所示的页面

<divclass="pop"><divclass="con"><spanclass="close"><imgsrc="img/close.png"></span><divclass="page1"><pclass="info"><spanclass="title">手机号：</span><inputtype="tel"class="tel"id="mobile"onkeyup="value=value.replace(/[^\w\.\/]/ig,&#39;&#39;)"required=""placeholder="请输入您的手机号"></p><pclass="info"><spanclass="title">验证码：</span><inputtype="tel"class="code"placeholder="输入验证码"><spanclass="code1">获取验证码</span></p><divclass="demanddemand2">提交</div></div><divclass="page2"><pclass="p1">提交成功</p><pclass="p2">我们将在索要成功后</p><pclass="p2">第一时间通知您！</p><divclass="demanddemand3">朕知道了</div></div></div></div>校验手机号是否正确

//校验手机号//页面的input写的正则下面直接调用方法就可以的jQuery.extend({checkmobileNo:function(str){varre=/^1[3|7|5|8]\d{9}$/;if(re.test(str)){returntrue;}else{returnfalse;}}});

//发送验证码给手机$.ajax({type:'GET',url:"你们后台提供的接口"+mobile,//即上面的接口1success:function(data,status){if(data.errcode==0){alert("已发送");$(".code1").attr("disabled","disabled");$(".code1").css("background-color","#b4b2b3");//下面就是实现倒计时的效果代码vard=newDate();d.setSeconds(d.getSeconds()+59);varm=d.getMonth()+1;vartime=d.getFullYear()+'-'+m+'-'+d.getDate()+''+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();varid=".code1";varend_time=newDate(Date.parse(time.replace(/-/g,"/"))).getTime(),//月份是实际月份-1sys_second=(end_time-newDate().getTime())/1000;vartimer=setInterval(function(){if(sys_second>1){sys_second-=1;varday=Math.floor((sys_second/3600)/24);varhour=Math.floor((sys_second/3600)%24);varminute=Math.floor((sys_second/60)%60);varsecond=Math.floor(sys_second%60);vartime_text='';if(day>0){time_text+=day+'天';}if(hour>0){if(hour<10){hour='0'+hour;}time_text+=hour+'小时';}if(minute>0){if(minute<10){minute='0'+minute;}time_text+=minute+'分';}if(second>0){if(second<10){second='0'+second;}time_text+=second+'秒';}$(id).text(time_text);}else{clearInterval(timer);$(".code1").attr("disabled",false);$(".code1").text('获取验证码');$(".code1").css("background-color","#f67a62");}},1000);}else{alert("发送失败，请再试一次。");}},error:function(data,status){alert(status);}});});向服务器提交信息

//验证验证码和手机发送的验证码是否一致$.ajax({type:'GET',url:"接口2",success:function(data,status){if(data.errcode==0){//向服务器提交信息$.ajax({type:'POST',url:"向服务器提交你们索要填写的信息接口",data:JSON.stringify({//data这里看你们的需求根据接口的数据去写"project_id":pid,"phone":mobile,"device":d}),success:function(data,status){if(data.errcode==0){$('.page1').hide();$('.page2').show();}else{alert("提交失败,请在尝试一次!");}},error:function(data,status){alert(data.errMsg);}});}else{alert("验证码不正确！");}},error:function(data,status){alert(status);}});});

终于写完了，大家有需求的自己尝试一下吧，这个只是一部分验证码千千万万种欢迎分享哦。有疑问的可以来问小月。

需要DEMO的请点击下载： ××× 没有提供下载的请给我留言哦！