&&&&&&&&&&&
众所周知在前段的工作中注册信息或获取当前手机号信息等需求，我们基本上都要涉及到手机号验证码，在网络上搜索的案例杂乱无章，用的时候全是坑，真心不想用了，然后自己写了一个获取手机验证码的倒计时效果。有需求的伙伴们可以看看怎么实现的。
如何获取手机验证码？
小月不知道大家是利用什么平台去获取验证码的，但是告诉大家我是在哪个平台获取的。
LeanCloud&：https://leancloud.cn/
文档：https://leancloud.cn/docs/sms_guide-js.html
在这个平台首先去要注册一个账号，在设置里面设置自己的信息按照文档去操作就可以了这里不多说了，大部分是后台去操作些接口的，我们前端有能力的可以自己去尝试用php去写接口。（懒惰的我是不会写。）
一般是两个接口：
发送验证请求（这样你的手机会受到短信验证哦）
返回数据验证手机号和验证是否一致
根据后台攻城狮的接口去实现吧。
前端页面的工作
下面这段代码就是上图所示的页面
&div class="pop"&
&div class="con"&
&span class="close"&&img src="img/close.png"&&/span&
&div class="page1"&
&p class="info"&
&span class="title"&手机号：&/span&
&input type="tel" class="tel" id="mobile" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" required="" placeholder="请输入您的手机号"&
&p class="info"&
&span class="title"&验证码：&/span&
&input type="tel" class="code" placeholder="输入验证码"&
&span class="code1"&获取验证码&/span&
&div class="demand demand2" style="width: 70%; margin-top: 20"&提交&/div&
&div class="page2"&
&p class="p1"&提交成功&/p&
&p class="p2"&我们将在索要成功后&/p&
&p class="p2"&第一时间通知您！&/p&
&div class="demand demand3" style="width: 80%; margin-top: 20 margin-bottom: 10"&朕知道了&/div&
校验手机号是否正确
//校验手机号
//页面的input写的正则下面直接调用方法就可以的
jQuery.extend({
checkmobileNo: function(str) {
var re =/^1[3|7|5|8]\d{9}$/;
if (re.test(str)) {
return true;
return false;
JS/JQ部分处理发送短信验证请求
//发送验证码给手机
type: 'GET',
url:"你们后台提供的接口" + mobile, //即上面的接口1
success: function(data, status) {
if (data.errcode==0) {
alert("已发送");
$(".code1").attr("disabled", "disabled");
$(".code1").css("background-color", "#b4b2b3");
//下面就是实现倒计时的效果代码
var d = new Date();
d.setSeconds(d.getSeconds() + 59);
var m = d.getMonth() + 1;
var time = d.getFullYear() + '-' + m + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
var id = ".code1";
var end_time = new Date(Date.parse(time.replace(/-/g, "/"))).getTime(),
//月份是实际月份-1
sys_second = (end_time - new Date().getTime()) / 1000;
var timer = setInterval(function() {
if (sys_second & 1) {
sys_second -= 1;
var day = Math.floor((sys_second / 3600) / 24);
var hour = Math.floor((sys_second / 3600) % 24);
var minute = Math.floor((sys_second / 60) % 60);
var second = Math.floor(sys_second % 60);
var time_text = '';
if (day & 0) {
time_text += day + '天';
if (hour & 0) {
if (hour & 10) {
hour = '0' +
time_text += hour + '小时';
if (minute & 0) {
if (minute & 10) {
minute = '0' +
time_text += minute + '分';
if (second & 0) {
if (second & 10) {
second = '0' +
time_text += second + '秒';
$(id).text(time_text);
clearInterval(timer);
$(".code1").attr("disabled", false);
$(".code1").text('获取验证码');
$(".code1").css("background-color", "#f67a62");
alert("发送失败，请再试一次。");
error: function(data, status) {
alert(status);
向服务器提交信息
//验证验证码和手机发送的验证码是否一致
type: 'GET',
url: "接口2",
success: function(data, status) {
if (data.errcode==0) {
//向服务器提交信息
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();
alert("提交失败,请在尝试一次!");
error: function(data, status) {
alert(data.errMsg);
alert("验证码不正确！");
error: function(data, status) {
alert(status);
终于写完了，大家有需求的自己尝试一下吧。有疑问的可以来问小月，想要案例源码的找小月来要把，&打开后请加QQ群在群文件可以自行下载哦！
阅读(...) 评论()js实现发送短信验证码后的倒计时功能(无视页面刷新) - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 11时,
之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用特别说明:&&&&&cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的.
代码片段(3)
1.&[代码]这是页面上的发送验证码按钮&&&&
&input id="second" type="button"
value="免费获取验证码"
2.&[代码]js对cookie的操作&&&&
//发送验证码时添加cookie
function addCookie(name,value,expiresHours){
var cookieString=name+"="+escape(value);
//判断是否设置过期时间,0代表关闭浏览器时失效
if(expiresHours&0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000);
cookieString=cookieString+";expires=" + date.toUTCString();
document.cookie=cookieS
//修改cookie的值
function editCookie(name,value,expiresHours){
var cookieString=name+"="+escape(value);
if(expiresHours&0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
cookieString=cookieString+";expires=" + date.toGMTString();
document.cookie=cookieS
//根据名字获取cookie的值
function getCookieValue(name){
var strCookie=document.
var arrCookie=strCookie.split("; ");
for(var i=0;i&arrCookie.i++){
var arr=arrCookie[i].split("=");
if(arr[0]==name){
return unescape(arr[1]);
return "";
3.&[代码]主要逻辑代码&&&&
$(function(){
$("#second").click(function (){
sendCode($("#second"));
v = getCookieValue("secondsremained");//获取cookie值
settime($("#second"));//开始倒计时
//发送验证码
function sendCode(obj){
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if(result){
doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s
settime(obj);//开始倒计时
//将手机利用ajax提交到后台的发短信接口
function doPostBack(url,backFunc,queryParam) {
async : false,
cache : false,
type : 'POST',
url : url,// 请求的action路径
data:queryParam,
error : function() {// 请求失败处理函数
success : backFunc
function backFunc1(data){
var d = $.parseJSON(data);
if(!d.success){
alert(d.msg);
}else{//返回验证码
alert("模拟验证码:"+d.msg);
$("#code").val(d.msg);
//开始倒计时
function settime(obj) {
countdown=getCookieValue("secondsremained");
if (countdown == 0) {
obj.removeAttr("disabled");
obj.val("免费获取验证码");
obj.attr("disabled", true);
obj.val("重新发送(" + countdown + ")");
countdown--;
editCookie("secondsremained",countdown,countdown+1);
setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次
//校验手机号是否合法
function isPhoneNum(){
var phonenum = $("#phonenum").val();
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(phonenum)){
alert('请输入有效的手机号码！');
开源中国-程序员在线工具：
相关的代码(2861)
1回/3346阅
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
0回/1514阅
[JavaScript]
[JavaScript]
1回/2620阅
[JavaScript]
[JavaScript]
[JavaScript]
有点小bug.
主要逻辑代码，5行 改成 ，&&v = getCookieValue("secondsremained")？
getCookieValue("secondsremained")：0
;//获取cookie值
去掉下面的。
& & & & & & &return "";&
& & & & & & &
& & & & &}&
2楼：ma_firsttime 发表于
引用来自“kkkkkellie”的评论有点小bug.
主要逻辑代码，5行 改成 ，&&v = getCookieValue("secondsremained")？
getCookieValue("secondsremained")：0
;//获取cookie值
去掉下面的。
& & & & & & &return "";&
& & & & & & &
& & & & &}&
没错，验证通过
3楼：涓滴之水_22676 发表于
引用来自“kkkkkellie”的评论有点小bug.
主要逻辑代码，5行 改成 ，&&v = getCookieValue("secondsremained")？
getCookieValue("secondsremained")：0
;//获取cookie值
去掉下面的。
& & & & & & &return "";&
& & & & & & &
& & & & &}&
引用来自“ma_firsttime”的评论没错，验证通过赞，//根据名字获取cookie的值 else{
return "";
}确实有问题
4楼：狂风8888 发表于
大神，赞！
5楼：litong5840768 发表于
那个倒计时在刷新的时候为啥会刷一次快速少一秒啊
6楼：Buchwalter 发表于
引用来自“litong5840768”的评论那个倒计时在刷新的时候为啥会刷一次快速少一秒啊刷新下也需要时间。。。。
7楼：破_石 发表于
后台校验比较好，redis
开源从代码分享开始
果然没注册的其它代码如何单纯的使用js就可以实现字母数字随机验证码如何单纯的使用js就可以实现字母数字随机验证码程序员123百家号当我们登录某网站时候，总是能看到验证码，可以出现各种提示和随机的验证码，是不是觉得很神奇？其实只需要简单的一个js和一个css样式，就可以实现这么炫酷的随机验证码。代码如下&html&&head&&title&字母数字验证码&/title&&meta http-equiv='content-type' content='text/charset=utf-8'/&&script type='text/javascript' src='jquery-1.7.2.js'&&/script&&script type='text/javascript'& //在全局定义验证码function createCode(){code = &&;var codeLength = 4;//验证码的长度var checkCode = document.getElementById(&code&);var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//随机数字或字母for(var i = 0; i & codeL i++) {//循环操作var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）code += random[index];//根据索引取得随机数加到code上}checkCode.value =//把code值赋给验证码}//校验验证码function validate(){var inputCode = document.getElementById(&input&).value.toUpperCase(); //取得输入的验证码并转化为大写if(inputCode.length &= 0) { //若输入的验证码长度为0alert(&请输入验证码！&); //则弹出请输入验证码}else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时alert(&验证码输入错误！请重新输入&); //则弹出验证码输入错误createCode();//刷新验证码document.getElementById(&input&).value = &&;//清空文本框}else { //输入正确时alert(&验证成功&);}}&/script&&style type='text/css'&#code{font-family:Arial,宋体;font-style:color:border:0;padding:2px 3letter-spacing:3font-weight:}&/style&&/head&&body onload='createCode()'&&div&验证码：&input type = &text& id = &input&/&&input type=&button& id=&code& onclick=&createCode()& style=&width:60px& title='点击更换验证码' /&&input type = &button& value = &验证& onclick = &validate()&/&&/div&&/body&&/html&接下来个大家上几个测试的图片1、验证成功2、验证错误3、请输入验证码只需要这么几个简单的代码就完成，感兴趣赶快去试一试吧！以上只是个人观点，如果有不足的欢迎留言交流本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。程序员123百家号最近更新：简介:喜欢看动漫，喜欢编程，并非宅男作者最新文章相关文章}