JS/jQ实现免费获取手机验证码倒计时效果


Posted in Javascript onJune 13, 2016

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码。

JS/jQ实现免费获取手机验证码倒计时效果

如何获取手机验证码?

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

LeanCloud :https://leancloud.cn/

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

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

一般是两个接口:

1.发送验证请求(这样你的手机会受到短信验证哦)

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

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

前端页面的工作

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

<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>
<p class="info">
<span class="title">验证码:</span>
<input type="tel" class="code" placeholder="输入验证码">
<span class="code1">获取验证码</span>
</p>
<div class="demand demand2" style="width: 70%; margin-top: 20px;">提交</div>
</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: 20px; margin-bottom: 10px;">朕知道了</div>
</div>
</div>
</div>

校验手机号是否正确

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

JS/JQ部分处理发送短信验证请求

//发送验证码给手机 
$.ajax({
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' + 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);
}
});
});

以上所述是小编给大家介绍的JS/jQ实现免费获取手机验证码倒计时效果的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
走出JavaScript初学困境—js初学
Dec 29 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
js select option对象小结
Dec 20 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 #Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 #Javascript
BootStrap智能表单demo示例详解
Jun 13 #Javascript
Bootstrap布局之栅格系统详解
Jun 13 #Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 #Javascript
jquery制做精致的倒计时特效
Jun 13 #Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 #Javascript
You might like
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
javascript工具库代码
2012/03/29 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
C#面试题问题集
2016/04/02 面试题
Shell如何接收变量输入
2016/08/06 面试题
大专学生推荐信范文
2013/11/19 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
员工加薪申请报告
2015/05/15 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
Golang中channel的原理解读(推荐)
2021/10/16 Golang
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android